rails3：未定义jQuery

对于JQuery和Rails都是新手，任何帮助都将不胜感激。rails3：未定义jQuery

我正在关注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);

来源

2012-06-06 Helen

我们需要看你的代码来帮助你，否则我们会猜测。 – Th0rndike

好吧，我发现了这个问题。我真的很愚蠢的错误，我在我的函数中使用jQuery中的'j'。对于这样一个愚蠢的错误抱歉。

来源

2012-06-07 06:24:33 Helen

当你能够做到时，不要忘记接受你的答案！ :) – Th0rndike

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

来源

2012-06-06 15:02:34 kode

不，我没有看到其他的javascript错误。 JQuery被加载。 – Helen

到的Gemfile检查这个

gem 'jquery-rails'

和到应用程序/资产/ 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-06 15:13:52 vicosanz

是的，我拥有所有这些。正如我之前提到的，我有另一个JQuery函数，可以很好地工作。相同的应用，只是一个不同的控制器 – Helen

对于任何人可能会偶然发现这一点，我有同样的问题，但在我的情况下，它是由 - 有一些令人惊讶的原因 - 要求jquery两次。

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

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

来源

2012-09-23 01:38:21 IanBussieres

经过多次搜索。（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 .

轨生成器会话指数新创建编辑摧毁

形式看起来是这样的。

您将需要添加周围的形式

DIV ID（不要忘了：遥控器=>真）

<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-10 18:49:38

rails3：未定义jQuery

回答

相关问题