如何在Rails中使用JQuery预先选择页面重定向上的单选按钮 [英] How to use JQuery to preselect radio button on page redirect in Rails

问题描述

我有一个Rails 4.2.6项目，我试图在其中使用JQuery预先选择页面重定向上的单选按钮.在主页static_pages/home.html.erb中，用户可以选择单击三个按钮(选项)之一:

I have a Rails 4.2.6 project where I'm trying to use JQuery to pre-select a radio button on a page redirect. From the home page -- static_pages/home.html.erb -- a user can choose to click one of three buttons (options):

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

当用户选择按钮时，他/她将被重定向到注册页面，该页面包含用于标识注册类型(选项1，选项2或选项3)的单选按钮的html.这是从users/registrations/new.html.erb生成的单选按钮的相关HTML:

When a user selects a button, he/she is redirected to the sign-up page, which contains html for radio buttons that identify the type of signup (Option 1, Option 2 or Option 3). Here's the relevant HTML for the radio buttons generated from users/registrations/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中来完成此任务:

My goal is to improve user experience by preselecting the appropriate radio button on the sign-up page based on the button the user clicks on the home page. I tried to accomplish this task by writing the following Jquery / Ajax function and placing it in 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: "/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

我还在回调中使用以下代码尝试了它:

I also tried it with the following code in the callback:

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

代码在控制台中运行时没有错误，但是没有预选任何单选按钮.所有console.log消息均显示正常.我不知道为什么我的回调代码无法正常工作.我在做错什么&我该如何解决?

The code runs without errors in the console, but no radio buttons are pre-selected. All console.log messages display okay. I can't figure out why my callback code is not working. What am I doing wrong & how can I fix it?

***************编辑*********************

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

这是我的用户控制器(users_controller.rb)中的相关代码:

Here's relevant code from my users controller (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):

Here's code for the form which renders the radio buttons (users/registrations/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" %>

推荐答案

您可以通过将id替换为class并让另一个属性具有value来做更好的编码方式，如下所示更改代码

You can do better way of coding by replacing the id with class and have another attribute with value, lets change the code as below

$(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并将其分配给页面的隐藏值，并在页面加载后尝试从隐藏值中获取该值，然后选择适当的单选按钮

So the above code send the selectedValue:your_selected_value, you need to parse the selectedValue in your ruby controller and assign to a hidden value of the page and try to get the value after page load from hidden value and select the appropriate radio button

这篇关于如何在Rails中使用JQuery预先选择页面重定向上的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！