Как использовать JQuery для предварительного выбора переключателя на странице перенаправления в Rails

Question

У меня есть проект Rails 4.2.6, где я пытаюсь использовать JQuery для предварительного выбора переключателя при перенаправлении страницы. На домашней странице - static_pages/home.html.erb - пользователь может выбрать, чтобы нажать одну из трех кнопок (опция):

<h2>Select the role that best describes you.</h2> 
<div id="option-1"> 
    <h2><%= link_to "Option 1", new_user_registration_path, class: "btn-block btn-lg btn-success" %></h2> 
</div> 
.... 
<div id="option-2">  
    <h2><%= link_to "Option 2", new_user_registration_path, class: "btn-block btn-lg btn-success" %></h2> 
</div> <!-- close workout-occasional -->  
</div> 
.... 
<div id="option-3"> 
    <h2><%= link_to "Option 3", new_user_registration_path, class: "btn-block btn-lg btn-success", id: "fitness-enthusiast" %></h2> 
</div> 

Когда пользователь выбирает кнопку, он/она перенаправляется которая содержит html для переключателей, которые идентифицируют тип регистрации (вариант 1, вариант 2 или вариант 3). Вот соответствующий HTML для радиокнопок, полученные от пользователей/регистрации/new.html.erb:

<div class="form-group radio_buttons required user_signup_as"><label class="radio_buttons required control-label"><abbr title="required">*</abbr> Signup as</label> 
<span class="radio"><label for="user_signup_as_option_one"><input class="radio_buttons required" type="radio" value="Option One" name="user[signup_as]" id="user_signup_as_option_one" />Option One</label></span> 
<span class="radio"><label for="user_signup_as_option_two"><input class="radio_buttons required" type="radio" value="Option Two" name="user[signup_as]" id="user_signup_as_option_two" />Option Two</label></span> 
<span class="radio"><label for="user_signup_as_option_three"><input class="radio_buttons required" type="radio" value="Option Three" name="user[signup_as]" id="user_signup_as_option_three" />Option Three</label></span> 
</div> 

Моя цель состоит в том, чтобы улучшить пользовательский опыт предварительного выбора соответствующей кнопки радио на странице регистрации на основе кнопки пользователь нажимает на домашнюю страницу. Я пытался решить эту задачу, написав следующую функцию Jquery/Ajax и поместить его в static_pages.js.erb:

$(document).ready(function() { 

    $('#option-3').click(function(){ 
console.log("you clicked the Option 3 button"); 

var value = "Option 3"; 
console.log(value); 

     $.ajax({ 
     type: "Get", 
     url: "https://stackoverflow.com/users/sign_up",  
      success: function() {   
       $("input[type='radio'][name='user[signup_as]'][value='" + value + "']").prop('checked', true); 
       console.log("this is end of the callback function");   
      } 
     }) 
}); 

}); // end ready 

Я также попытался это с помощью следующего кода в функции обратного вызова:

$('#user_signup_as_option_three').prop("checked", true); 

Код запускается без ошибок в консоли, но никакие переключатели не были предварительно выбраны. Все сообщения console.log отображаются в порядке. Я не могу понять, почему мой код обратного вызова не работает. Что я делаю неправильно & как я могу это исправить?

*************** EDIT *********************

Вот соответствующий код из моего контроллер пользователей (users_controller.rb):

class UsersController < ApplicationController 
load_and_authorize_resource 
before_action :set_user, only: [:show, :edit, :update, :destroy] 

... 
# GET /users/new 
def new 
@user = User.new 
end 

... 

private 

    def set_user 
    @user = User.find(params[:id]) 
end 

end 

Вот код формы, который делает радиокнопок (пользователей/регистрация/new.html.erb):

<% provide(:title, "Sign Up") %> 

<h1>Sign Up</h1> 

<%= simple_form_for(resource, 
    as: resource_name, 
    url: registration_path(resource_name)) do |f| %> 
    <%= f.error_notification %> 

    <div class="form-inputs sign-up"> 
    <%= f.input :email, required: true, autofocus: true %> 
    <%= f.input :password, required: true %> 
    <%= f.input :password_confirmation, required: true %> 
    <%= f.input :signup_as, :collection => [ "Option One", "Option Two", "Option Three"." ], :as => :radio_buttons %> 
    <input type="hidden" id="" name='user[signup_as]' value="" />   
    </div> 

    <div class="form-actions"> 
    <%= f.button :submit, "Sign up" %> 
    </div> 
<% end %> 

<%= render "users/shared/links" %> 

Answer 1

Вы можете сделать лучший способ кодирования, заменив идентификатор на класс и получив другой атрибут со значением, позволяет изменить код, как показано ниже

$(document).ready(function() { 
 

 
    $('.option').click(function(){ 
 
console.log("you clicked the Option 3 button"); 
 

 
var value = $(this).data("value"); //which gives option1/option2/option3 depends on which div ur clicking 
 
console.log(value); 
 

 
     $.ajax({ 
 
     type: "Get", 
 
     url: "https://stackoverflow.com/users/sign_up", 
 
     data : { selectedValue : value}, 
 
     success: function() {   
 
       $("input[type='radio'][name='user[signup_as]'][value='" + value + "']").prop('checked', true); 
 
       console.log("this is end of the callback function");   
 
      } 
 
     }) 
 
}); 
 

 
}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Select the role that best describes you.</h2> 
 
<div class="option" data-value="option1"> 
 
    <h2><%= link_to "Option 1", new_user_registration_path, class: "btn-block btn-lg btn-success" %></h2> 
 
</div> 
 
.... 
 
<div class="option" data-value="option2">  
 
    <h2><%= link_to "Option 2", new_user_registration_path, class: "btn-block btn-lg btn-success" %></h2> 
 
</div> <!-- close workout-occasional -->  
 
</div> 
 
.... 
 
<div class="option" data-value="option3"> 
 
    <h2><%= link_to "Option 3", new_user_registration_path, class: "btn-block btn-lg btn-success", id: "fitness-enthusiast" %></h2> 
 
</div>

Так выше код отправить selectedValue:your_selected_value, вам нужно разобрать selectedValue в контроллере рубинового и назначить скрытую стоимость страницы и попытаться получить значение после загрузки страницы из скрытое значение и выберите соответствующий переключатель