在Ruby On Rails中使用jquery

Question

我是Ruby on Rails的新手。 我想在我的应用程序中实现此注册向导。 我已经将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

在Application.js中更改订单

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

同

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

Answer 2

我只是复制了该文件下面的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>