[英]Javascript not working in rails asset pipeline
I had written some jQuery for a partial which resided in a js.erb file. 我为js.erb文件中的部分写了一些jQuery。 This jQuery turned into general functions and I decided to put into the asset pipeline instead ie
assets/javascripts/myfile.js
and now the JavaScript is no longer working. 这个jQuery变成了一般函数,我决定投入资产管道,即
assets/javascripts/myfile.js
,现在JavaScript已不再有效了。 I can see from the source code that the JavaScript is being loaded into the browser but it just isn't doing anything, but it was working before as a js.erb file. 我可以从源代码中看到JavaScript被加载到浏览器中但它没有做任何事情,但它之前是作为js.erb文件工作。
What could be the problem? 可能是什么问题呢?
In application.js I have 在application.js我有
//= require jquery
//= require_tree .
Here is my js: 这是我的js:
$(document).ready(function() {
$("#close").click(function(){
$(this).parent().parent().slideUp("slow");
});
$(function() {
$( "#datepicker" ).datepicker({
dateFormat : "yy-mm-dd"
});
});
var player_count = $("#player option").length;
$('#btn-add').click(function(){
$('#users option:selected').each( function() {
if(player_count >= 8){
$('#select-reserve').append("<option value='"+$(this).val()+"'>"+$(this).text()+" </option>");
$(this).remove();
}else{
$('#player').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
player_count++;
}
});
});
$('#btn-remove').click(function(){
$('#player option:selected').each( function() {
$('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
player_count--;
});
});
$('#btn-remove-reserve').click(function(){
$('#select-reserve option:selected').each( function() {
$('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$("#submit").click(function(){
$("select option").prop("selected", "selected");
});
});
I have noticed a new development, the js works after hitting reload. 我注意到了一个新的开发,js在重新加载后工作。 But whenever coming onto the page for first time (Direct from a link) it doesnt work.
但无论何时第一次进入页面(直接从链接)它都无法正常工作。
This was a turbolinks problem. 这是一个涡轮问题。 The solution was to wrap my coffeescript in this:
解决方案是将我的coffeescript包装成:
ready = ->
// functions
$(document).ready(ready)
$(document).on('page:load', ready)
Your application.js
is loading myfile.js
before jQuery. 你的
application.js
正在jQuery之前加载myfile.js
。 Assuming this file still contains jQuery code, it will not run correctly since jQuery is not yet defined. 假设此文件仍包含jQuery代码,则由于尚未定义jQuery,因此无法正常运行。 Does your browser's JS console say something like: "Uncaught ReferenceError: $ is not defined"?
您的浏览器的JS控制台是否会出现类似:“未捕获的ReferenceError:$未定义”?
Note that Rails usually generates an application.js
that looks like: 请注意,Rails通常生成一个如下所示的
application.js
:
//= require jquery
//= require jquery_ujs
//= require_tree .
Also, if myfile.js
contains ERB code, then you need to rename it to myfile.js.erb
as @Flauwekeul suggests. 此外,如果
myfile.js
包含ERB代码,则需要将其重命名为myfile.js.erb
如@Flauwekeul所示。
I was having the exact same problem Jason Carty. 我有同样的问题杰森卡蒂。 Later on I found out that the issue was caused because I had:
后来我发现这个问题是因为我有:
= javascript_include_tag "vendor/modernizr" = javascript_include_tag“vendor / modernizr”
= javascript_include_tag "application", 'data-turbolinks-track' => true = javascript_include_tag“application”,“data-turbolinks-track”=> true
below "yield", in the bottom of my body tag. 低于“产量”,位于我身体标签的底部。 I moved it back to the top, after stylesheets and before "csrt_meta_tags", above my body tag and now works flawlessly.
我把它移回到顶部,在样式表之后和“csrt_meta_tags”之前,在我的身体标签之上,现在可以完美地工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.