Question

我有一个Rails 4.2.6项目，我正在尝试使用JQuery预先选择页面重定向上的单选按钮。从主页 - static_pages / home.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>

当用户选择按钮时，他/她将被重定向到注册页面，其中包含用于标识注册类型（选项1，选项2或选项3）的单选按钮的html。以下是用户/ registrations / new.html.erb生成的单选按钮的相关HTML：

$(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: "/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

我的目标是通过根据用户在主页上点击的按钮在注册页面上预选相应的单选按钮来改善用户体验。我尝试通过编写以下Jquery / Ajax函数并将其放在static_pages.js.erb中来完成此任务：

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

我也在回调中使用以下代码尝试了它：

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

代码在控制台中运行时没有错误，但没有预先选择单选按钮。所有console.log消息都显示正常。我无法弄清楚为什么我的回调代码不起作用。我做错了什么？我该如何解决？

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

以下是我的用户控制器（users_controller.rb）的相关代码：

<% 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" %>

以下是呈现单选按钮（users / registrations / new.html.erb）的表单代码：

{{1}}

Answer 1

你可以通过用class替换id并使用另一个带有value的属性来做更好的编码方式，让我们改变代码如下

$(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: "/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，你需要在你的ruby控制器中解析selectedValue并分配一个隐藏的页面值并尝试从隐藏值加载页面后获取值并选择适当的单选按钮

如何使用JQuery预先选择Rails中页面重定向上的单选按钮

1 个答案: