在Ruby On Rails中使用jquery

Question

我是Ruby on Rails中的新手。我想在我的應用程序中執行this註冊嚮導。我已將jquery複製到名爲的文件signup_validation.js並將該文件包含在/ assets/javascripts文件夾中。

我已將HTML代碼包含在我的視圖中。現在，我如何包含該JavaScript文件，以便註冊嚮導以與本教程中相同的方式工作。

這裏是new.html.erb文件

<script type="text/javascript" src="/javascripts/signup_validation.js"></script> 

<h2>Sign up</h2> 

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> 
    <%= devise_error_messages! %> 

    <form id="example-advanced-form" action="#"> 
    <h3>Account</h3> 
    <fieldset> 
     <legend>Account Information</legend> 

     <label for="userName-2">User name *</label> 
     <input id="userName-2" name="userName" type="text" class="required"> 
     <label for="password-2">Password *</label> 
     <input id="password-2" name="password" type="text" class="required"> 
     <label for="confirm-2">Confirm Password *</label> 
     <input id="confirm-2" name="confirm" type="text" class="required"> 
     <p>(*) Mandatory</p> 
    </fieldset> 

    <h3>Profile</h3> 
    <fieldset> 
     <legend>Profile Information</legend> 

     <label for="name-2">First name *</label> 
     <input id="name-2" name="name" type="text" class="required"> 
     <label for="surname-2">Last name *</label> 
     <input id="surname-2" name="surname" type="text" class="required"> 
     <label for="email-2">Email *</label> 
     <input id="email-2" name="email" type="text" class="required email"> 
     <label for="address-2">Address</label> 
     <input id="address-2" name="address" type="text"> 
     <label for="age-2">Age (The warning step will show up if age is less than 18) *</label> 
     <input id="age-2" name="age" type="text" class="required number"> 
     <p>(*) Mandatory</p> 
    </fieldset> 

</form> 

<% end %> 

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

這裏是的application.js文件。

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. JavaScript code in this file should be added after the last require_* statement. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require_tree . 
//= require signup_validation 

Answer 1

我只是複製該文件下面的jQuery和它的工作:)

<script type="text/javascript" src="/javascripts/signup_validation.js"></script> 

<h2>Sign up</h2> 

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> 
    <%= devise_error_messages! %> 

    <form id="example-advanced-form" action="#"> 
    <h3>Account</h3> 
    <fieldset> 
     <legend>Account Information</legend> 

    <label for="userName-2">User name *</label> 
    <input id="userName-2" name="userName" type="text" class="required"> 
    <label for="password-2">Password *</label> 
    <input id="password-2" name="password" type="text" class="required"> 
    <label for="confirm-2">Confirm Password *</label> 
    <input id="confirm-2" name="confirm" type="text" class="required"> 
    <p>(*) Mandatory</p> 
</fieldset> 

<h3>Profile</h3> 
<fieldset> 
    <legend>Profile Information</legend> 

    <label for="name-2">First name *</label> 
    <input id="name-2" name="name" type="text" class="required"> 
    <label for="surname-2">Last name *</label> 
    <input id="surname-2" name="surname" type="text" class="required"> 
    <label for="email-2">Email *</label> 
    <input id="email-2" name="email" type="text" class="required email"> 
    <label for="address-2">Address</label> 
    <input id="address-2" name="address" type="text"> 
    <label for="age-2">Age (The warning step will show up if age is less than 18) *</label> 
    <input id="age-2" name="age" type="text" class="required number"> 
    <p>(*) Mandatory</p> 
</fieldset> 

<script> 
var form = $("#example-advanced-form").show(); 

form.steps({ 
    headerTag: "h3", 
    bodyTag: "fieldset", 
    transitionEffect: "slideLeft", 
    onStepChanging: function (event, currentIndex, newIndex) 
    { 
     // Allways allow previous action even if the current form is not valid! 
     if (currentIndex > newIndex) 
     { 
      return true; 
     } 
     // Forbid next action on "Warning" step if the user is to young 
     if (newIndex === 3 && Number($("#age-2").val()) < 18) 
     { 
      return false; 
     } 
     // Needed in some cases if the user went back (clean up) 
     if (currentIndex < newIndex) 
     { 
      // To remove error styles 
      form.find(".body:eq(" + newIndex + ") label.error").remove(); 
      form.find(".body:eq(" + newIndex + ") .error").removeClass("error"); 
     } 
     form.validate().settings.ignore = ":disabled,:hidden"; 
     return form.valid(); 
    }, 
    onStepChanged: function (event, currentIndex, priorIndex) 
    { 
     // Used to skip the "Warning" step if the user is old enough. 
     if (currentIndex === 2 && Number($("#age-2").val()) >= 18) 
     { 
      form.steps("next"); 
     } 
     // Used to skip the "Warning" step if the user is old enough and wants to the previous step. 
     if (currentIndex === 2 && priorIndex === 3) 
     { 
      form.steps("previous"); 
     } 
    }, 
    onFinishing: function (event, currentIndex) 
    { 
     form.validate().settings.ignore = ":disabled"; 
     return form.valid(); 
    }, 
    onFinished: function (event, currentIndex) 
    { 
     form.submit(); 
     alert("Submitted!"); 
    } 
}).validate({ 
    errorPlacement: function errorPlacement(error, element) { element.before(error); }, 
    rules: { 
     confirm: { 
      equalTo: "#password-2" 
     } 
    } 
}); 
</script> 

Answer 2

更改訂單中的application.js Replce這

隨着

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require signup_validation 
//= require_tree .