So verwenden Sie JQuery zum Vorauswählen der Optionsschaltfläche auf Seite Umleiten in Rails

Question

Ich habe ein Rails 4.2.6-Projekt, wo ich versuche, JQuery zu verwenden, um ein Optionsfeld auf einer Seitenumleitung vorzuwählen. Von der Startseite - static_pages/home.html.erb - ein Benutzer kann eine von drei Tasten (Optionen) wählen klicken:

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

Wenn ein Benutzer auf eine Schaltfläche auswählt, wird er/sie auf die umgeleitet wird Anmeldeseite, die HTML für Optionsfelder enthält, die die Art der Anmeldung angeben (Option 1, Option 2 oder Option 3). Hier ist der relevante HTML für die Radio-Buttons erzeugt von den Benutzern/Registrierungen/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> 

Mein Ziel ist es Benutzererfahrung zu verbessern, indem das entsprechende Optionsfeldes Vorwählen auf der Anmeldeseite basierend auf der Taste Der Benutzer klickt auf die Startseite. Ich habe versucht, diese Aufgabe zu erfüllen, indem die folgende Jquery/Ajax-Funktion zu schreiben und es in static_pages.js.erb Abdrucken:

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

Ich versuchte es auch mit dem folgenden Code in dem Rückruf:

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

Der Code wird ohne Fehler in der Konsole ausgeführt, aber keine Optionsfelder sind vorausgewählt. Alle Meldungen von console.log werden in Ordnung angezeigt. Ich kann nicht herausfinden, warum mein Rückrufcode nicht funktioniert. Was mache ich falsch? & Wie kann ich es beheben?

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

Hier entsprechenden Code aus meiner Benutzer-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 

Hier Code für das Formular, das die Radio-Buttons (Benutzer/Registrierungen/new.html.erb) macht: kann

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

Sie bessere Weise tun von Kodierung durch Ersetzen der ID durch Klasse und ein anderes Attribut mit Wert, lassen Sie die ändern Code wie unten

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

So ist der obige Code die selectedValue:your_selected_value sendet, müssen Sie die selectedValue in Ihren Ruby-Controller zu analysieren und zu einem verborgenen Wert der Seite zuweisen und versuchen, den Wert nach Laden der Seite zu bekommen aus versteckter Wert und wähle das entsprechende Optionsfeld