Question

JQuery和Rails都是新手，非常感谢任何帮助。

我正在关注dynamic select menus上的RailsCast教程，但是当我尝试加载表单时，动态选择不起作用，我在firebug中收到错误，指出没有加载JQuery。我检查了assets / application.js，函数似乎正确加载。在任何其他内容产生之前，我的布局文件中也包含javascript_include_tag。我尝试过预编译我的资产，但似乎没有做任何事情。

奇怪的是我为另一个控制器定义了另一个JQuery函数，该函数工作正常。我完全不知道这里发生了什么。

更新 - 添加代码段。

的application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

application.html.erb

    <head>
      <title> <%= default_title(yield(:title)) %> </title>
      <%= stylesheet_link_tag "application", :media => "all" %>
      <%= javascript_include_tag "application" %>
      <%= csrf_meta_tags %>
    </head>
    ...
    <div class="container">
      ...
      <%= yield %>  
      <%= debug(params) if Rails.env.development? %>
    </div>

hostprofiles.js.coffee

JQuery ->
    cities = $('#hostprofile_city_id').html()
    console.log(cities)
    $('#hostprofile_country_id').change ->
        country = $('#hostprofile_country_id :selected').text()
        escaped_country = country.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')   
        options = $(cities).filter("optgroup[lable=#{escaped_country}]").html()
        console.log(options)
        if options
            $('#hostprofile_city_id').html(options)
            $('#hostprofile_city_id').parent().show()
        else
            $('#hostprofile_city_id').empty()
            $('#hostprofile_city_id').parent().hide()

生成的jquery函数是application.js

(function() {   
      JQuery(function() {
        var cities;
        cities = $('#hostprofile_city_id').html();
        console.log(cities);
        return $('#hostprofile_country_id').change(function() {
          var country, escaped_country, options;
          country = $('#hostprofile_country_id :selected').text();
          escaped_country = country.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
          options = $(cities).filter("optgroup[lable=" + escaped_country + "]").html();
          console.log(options);
          if (options) {
            $('#hostprofile_city_id').html(options);
            return $('#hostprofile_city_id').parent().show();
          } else {
            $('#hostprofile_city_id').empty();
            return $('#hostprofile_city_id').parent().hide();
          }
        });
      });

    }).call(this);

Answer 1

查看页面源中是否加载了jQuery（如果使用FF或Chrome，则为F12）。还要在出现错误的代码之前检查是否存在JavaScript错误。

Answer 2

进入Gemfile检查这个

gem 'jquery-rails'

并进入app / assets / javascript / 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 vendor/assets/javascripts of plugins, if any, 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
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .

行// =要求jquery将jQuery加载到Rails 3

Answer 3

好的，我发现了这个问题。对我来说真是个愚蠢的错误，我在我的函数中将jQuery中的'j'大写。为这样一个愚蠢的错误道歉。

Answer 4

对于其他任何可能偶然发现这个问题的人，我遇到了同样的问题，但在我的情况下，这是由于 - 由于一些令人惊讶的原因 - 需要两次jquery引起的。

...
//= require jquery
//= require jquery
...

拿出额外的一个为我做了。

Answer 5

经过多次搜索。（24小时值得！）这是我发现的。

鉴于此Rails设置。

$ gem list --local | egrep "jquery|rails"
coffee-rails (3.2.2)
jquery-rails (3.0.1)
rails (3.2.13)
sass-rails (3.2.6)

这是application.js清单摘录。这就是Rails 3.2.13为您提供的默认设置。没问题。

//= require jquery
//= require jquery_ujs
//= require_tree .

rails生成控制器会话索引new create edit destroy

表单看起来像这样。

您需要在表单

周围添加div id

（别忘了：remote =＆gt; true）

<div id="login_form">
  <% if flash[:alert] %>
    <p id="notice" ><%= flash[:alert] %></p>
  <% end %>
  <%= form_tag  :remote => true  do %>
    <fieldset>
      <legend>Please Log In</legend>
      <div>
        <label for="name" >Name:</label>
        <%= text_field_tag :name, params[:name] %>
      </div>
      <div>
        <label for="password" >Password:</label>
        <%= password_field_tag :password, params[:password] %>
      </div>
      <div id="login_submit_button">
        <%= submit_tag "Login" %>
      </div>
    </fieldset>
   <% end %>
</div>

我使用以下内容创建了一个javascript文件。

jQuery.noConflict（）; 是关键！

//./app/assets/javascripts/my_session.js

// These requires tell manifest to load these first from application.js
//= require jquery
//= require jquery_ujs


// $.fn  is  alias for   Jquery.prototype
//
// You can define plugins like this.
jQuery.prototype.hello = function() {
    alert("hello");
}

// Or, you may wish to use the $.fn
jQuery.noConflict();            // http://api.jquery.com/jQuery.noConflict/
(function($) {
    $.fn.world = function() {
        alert("world");
    };                        // watch your semicolons!!

    $.fn.clearForm = function() {
        return this.each(function() {
            var type = this.type, tag = this.tagName.toLowerCase();
            if (tag == 'form')
                return $(':input', this).clearForm();
            if (type == 'text' || type == 'password' || tag == 'textarea')
                this.value = '';
            else if (type == 'checkbox' || type == 'radio')
                this.checked = false;
            else if (tag == 'select')
                this.selectedIndex = -1;
        });
    };
})(jQuery);

jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
    if ($("#login_form").length) {  // If exists, then reset
        //$("#login_form form")[0].reset();
        $().hello();
        $().world();
        $("#login_form form").clearForm();
    }
});
// Code that uses other library's $ can follow here.


// OR, you can just use JQuery in place of $     (The plugins hello and world still need the above magic though!)

//jQuery(document).ready(function() {
//    if (jQuery("#login_form").length) {  // If exists, then reset
//        jQuery("#login_form form")[0].reset();
//        jQuery().hello();
//        jQuery().world();
//    }
//});

rails3：JQuery没有定义

5 个答案: