[英]Rails javascript only works after reload
The problem is exactly what the heading says. 问题正是标题所说的。 The javaScript is in the asset pipeline ie assets/javascripts/myfile.js.coffee In the application.js I have: javaScript位于资产管道中,即assets / javascripts / myfile.js.coffee在application.js中我有:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.all
//= requier twitter/bootstrap
//= require jasny-bootstrap
//= require_tree .
This is the coffeescript 这是coffeescript
$(document).ready ->
$("#close").click ->
$(this).parent().parent().slideUp("slow")
$( "#datepicker" ).datepicker
dateFormat : "yy-mm-dd"
player_count = $("#player option").length
$('#btn-add').click ->
$('#users option:selected').each ->
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 ->
$('#player option:selected').each ->
$('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
$(this).remove()
player_count--
$('#btn-remove-reserve').click ->
$('#select-reserve option:selected').each ->
$('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
$(this).remove()
$("#submit").click ->
$("select option").prop("selected", "selected")
I can see in the source code on the browser that the javaScript has been loaded, but it only works after I reload the page. 我可以在浏览器的源代码中看到javaScript已经加载,但它只在我重新加载页面后才能工作。
For turbolinks 5.0 you must use the turbolinks:load event, which is called the first time on page load and every time on a turbolink visit. 对于turbolinks 5.0,您必须使用turbolinks:load事件,这是第一次在页面加载时调用,每次在turbolink访问时调用。 More info: https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads 更多信息: https : //github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads
CoffeeScript code: CoffeeScript代码:
$(document).on 'turbolinks:load', ->
my_func()
JavaScript code: JavaScript代码:
document.addEventListener("turbolinks:load", function() {
my_func();
})
This was a turbolinks problem. 这是一个涡轮问题。 Thanks to @zwippie for leading me in the right direction! 感谢@zwippie带领我朝着正确的方向前进! The solution was to wrap my coffeescript in this: 解决方案是将我的coffeescript包装成:
ready = ->
// functions
$(document).ready(ready)
$(document).on('page:load', ready)
I guess this is a turbolinks issue. 我想这是一个涡轮问题。
Either remove turbolinks from your project or modify your script to something like: 从项目中删除turbolinks或将脚本修改为:
$(function() {
initPage();
});
$(window).bind('page:change', function() {
initPage();
});
function initPage() {
// Page ready code...
}
您可以安装jquery.turbolinks gem来解决问题,而无需更改您的Javascript。
You can have your jquery.turbolink place at the right position like this 您可以将jquery.turbolink放置在正确的位置
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
And in the Gemfile you can install the jquery-turbolinks gem 在Gemfile中你可以安装jquery-turbolinks gem
gem 'jquery-turbolinks'
Rails 5 Use the jquery.turbolinks gem and using Rails 5使用jquery.turbolinks gem并使用
$( document ).on('turbolinks:load', function() {
// your code
}
If you work with JQuery plugins such as Clock Time Picker , firstly use jQuery document ready
function, which causes your script to wait until the entire page is loaded before attempting to run and then you can use turbolinks:load
event. 如果您使用JQuery插件(如Clock Time Picker) ,首先使用jQuery document ready
函数,这会导致您的脚本在尝试运行之前等待整个页面加载,然后您可以使用turbolinks:load
event。
JQuery(function($) {
$(document).on('turbolinks:load', function() {
$('.time').clockTimePicker();
});
});
It is good to be situated in your app/assets/javascripts/... js
file 最好位于app/assets/javascripts/... js
文件中
I'm trying Rails 5.2 and found that 'turbolinks:load'
wasn't getting loaded the first time a page loads. 我正在尝试Rails 5.2并发现'turbolinks:load'
在第一次加载页面时没有加载。 This is what I needed to do in my CoffeeScript file. 这是我在CoffeeScript文件中需要做的。
document.addEventListener('turbolinks:load', ->
# ... CoffeeScript code here
)
if !Turbolinks?
location.reload
Turbolinks.dispatch("turbolinks:load")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.