0

JQuery 和 Rails 的新手，任何帮助将不胜感激。

我正在关注关于动态选择菜单的 RailsCast 教程，但是当我尝试加载表单时，动态选择不起作用，并且我在萤火虫中收到错误，指出未加载 JQuery。我检查了 assets/application.js 并且该功能似乎已正确加载。在生成任何其他内容之前，我的布局文件中也包含了 javascript_include_tag。我尝试预编译我的资产，但这似乎没有任何作用。

奇怪的是我为另一个控制器定义了另一个 JQuery 函数，并且该函数运行良好。我完全被这里发生的事情弄糊涂了。

更新 - 添加代码片段。

应用程序.js

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

应用程序.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);
4

5 回答 5

0

经过多次搜索。（值得 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 生成控制器会话索引新创建编辑销毁

表格看起来像这样。

您需要在表单周围添加 div id

（不要忘记 :remote => 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();
//    }
//});
于 2013-07-10T18:49:38.847 回答
0

检查页面源中是否加载了 jQuery（如果您使用 FF 或 Chrome，请按 F12）。还要检查在收到错误的代码之前是否存在 JavaScript 错误。

于 2012-06-06T15:02:34.827 回答
0

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

于 2012-06-06T15:13:52.397 回答
0

好的，我发现了问题。就我而言，这是一个非常愚蠢的错误，我在函数中将 jQuery 中的“j”大写。为这么愚蠢的错误道歉。

于 2012-06-07T06:24:33.473 回答
0

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

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

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

于 2012-09-23T01:38:21.747 回答