Rails javascript only works after reload
Solution 1
This was a turbolinks problem. Thanks to @zwippie for leading me in the right direction! The solution was to wrap my coffeescript in this:
ready = ->
// functions
$(document).ready(ready)
$(document).on('page:load', ready)
Solution 2
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. More info: https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads
CoffeeScript code:
$(document).on 'turbolinks:load', ->
my_func()
JavaScript code:
document.addEventListener("turbolinks:load", function() {
my_func();
})
Solution 3
I guess this is a turbolinks issue.
Either remove turbolinks from your project or modify your script to something like:
$(function() {
initPage();
});
$(window).bind('page:change', function() {
initPage();
});
function initPage() {
// Page ready code...
}
As mentioned here.
Solution 4
You can install the jquery.turbolinks gem to solve the problem without changing your Javascript.
Solution 5
You can have your jquery.turbolink place at the right position like this
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
And in the Gemfile you can install the jquery-turbolinks gem
gem 'jquery-turbolinks'
Jason Carty
I am new to programming, have started with php, javaScript, mySql and a few others a few months ago. Hoping to get a job in programming soon! I can hopefully contribute to this programming society.
Updated on July 08, 2022Comments
-
Jason Carty almost 2 years
The problem is exactly what the heading says. The javaScript is in the asset pipeline i.e assets/javascripts/myfile.js.coffee In the application.js I have:
//= require jquery //= require jquery_ujs //= require turbolinks //= require jquery.ui.all //= requier twitter/bootstrap //= require jasny-bootstrap //= require_tree .
This is the 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.