Javascript rails3:JQuery未定义
JQuery和Rails都是新手，如果您有任何帮助，我们将不胜感激 我正在学习上的RailsCast教程，但是当我尝试加载表单时，动态选择不起作用，我在firebug中得到一个错误，指出JQuery没有加载。我检查了assets/application.js，该函数似乎加载正确。在生成任何其他内容之前，我的布局文件中还包含javascript_include_标记。我试着对我的资产进行预编译，但似乎没有任何效果 奇怪的是，我为另一个控制器定义了另一个JQuery函数，该函数工作得非常好。我完全被这里发生的事情弄糊涂了 更新-添加代码段 application.jsJavascript rails3:JQuery未定义,javascript,jquery,ruby-on-rails,Javascript,Jquery,Ruby On Rails,JQuery和Rails都是新手，如果您有任何帮助，我们将不胜感激 我正在学习上的RailsCast教程，但是当我尝试加载表单时，动态选择不起作用，我在firebug中得到一个错误，指出JQuery没有加载。我检查了assets/application.js，该函数似乎加载正确。在生成任何其他内容之前，我的布局文件中还包含javascript_include_标记。我试着对我的资产进行预编译，但似乎没有任何效果 奇怪的是，我为另一个控制器定义了另一个JQuery函数，该函数工作得非常好。我完全被
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
<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>
(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);
如果您使用FF或Chrome，请检查jQuery是否加载到页面源F12中。在代码出现错误之前，还要检查是否存在JavaScript错误。请检查此文件
gem 'jquery-rails'
// 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 .
行//=requirejquery将jquery加载到Rails 3中好的，我发现了问题。我犯了一个非常愚蠢的错误，我在函数中把jQuery中的“j”大写。对于这样一个愚蠢的错误，我深表歉意。对于其他可能偶然发现这个问题的人，我也遇到了同样的问题，但在我的情况下，它是由于——出于某种令人惊讶的原因——两次需要jquery造成的
...
//= require jquery
//= require jquery
...
在多次搜索后，取出多余的一个就可以了。。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)
//= require jquery
//= require jquery_ujs
//= require_tree .
<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>
我们需要查看您的代码来帮助您，否则我们会猜测。是的，我有所有这些。正如我前面提到的，我有另一个JQuery函数，它工作得非常好。同一个应用程序，只是一个不同的控制器。当你能够做到时，别忘了接受你的答案！：
<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>
//./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();
// }
//});