Rails 4 Turbo-Link Prevents Jquery Scripts from Working

Rails 4: how to use $(document).ready() with turbo-links

I just learned of another option for solving this problem. If you load the jquery-turbolinks gem it will bind the Rails Turbolinks events to the document.ready events so you can write your jQuery in the usual way. You just add jquery.turbolinks right after jquery in the js manifest file (by default: application.js).

Turbolink causing issue to load the 3rd party javascript(zendesk) on next page

You are passing the return value of the function zendesk_web_widget to the listener, not the function itself. So instead of calling the function (with ()), try passing the function:

document.addEventListener('page:change', zendesk_web_widget);

Or, making a wrapper function for it:

document.addEventListener('page:change', function () { zendesk_web_widget(); });

And since you're using jQuery, why not make the code use jQuery.

$(document).on('page:change', zendesk_web_widget);

With turbolinks, jQuery stops working until a hard refresh

You do not have to use jquery.turbolinks like the other answer states. You just need to wait to run your javascript until Turbolinks triggers the page:load event.

See bottom of post for update for Turbolinks 5

$(document).on 'ready page:load', ->
  # granted I don't know the context here, but instead of using javascript to hide something on DOM load, I would use CSS. Look below for that solution.
  $('#test_contrat_id').parent().hide()

$(document).on 'change', '#test_employe_id', (e) ->
  contrats = $('#test_contrat_id').html()
  employe = $('#test_employe_id :selected').text()
  escaped_employe = employe.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
  options = $(contrats).filter("optgroup[label='#{escaped_employe}']").html()
  if options
    $('#test_contrat_id').html(options)
    $('#test_contrat_id').parent().show()
  else
    $('#test_contrat_id').empty()
    $('#test_contrat_id').parentemploye

---

For above CSS comment...

# css file
.hidden {
  display: none !important;
  visibility: hidden !important;
}

# add the class .hidden to that element in your view.

# your CoffeeScript will now be
$(document).on 'change', '#test_employe_id', (e) ->
  contrats = $('#test_contrat_id').html()
  employe = $('#test_employe_id :selected').text()
  escaped_employe = employe.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
  options = $(contrats).filter("optgroup[label='#{escaped_employe}']").html()
  if options
    $('#test_contrat_id').html(options)
    $('#test_contrat_id').parent().removeClass('hidden')
  else
    $('#test_contrat_id').empty()
    $('#test_contrat_id').parent().addClass('hidden')

This GitHub thread is very interesting and worth your read about using .hide() and .show().

---

Turbolinks 5

Turbolinks 5 adds their own event listeners, so you no longer need to use ready page:load.

$(document).on 'turbolinks:load', ->

Rails 5: JQuery inside $(document).ready does not fire from page to page, only on reload

As I started to do more research, I found out it was a turbolinks issue.

I was able to reference this answer:

Rails 4: how to use $(document).ready() with turbo-links

changing,

$( document ).ready(function() {...

to

$(document).on('turbolinks:load', function() {...

fixed all my issues.

Rails, javascript not loading after clicking through link_to helper

Are you using Rails 4? (Find out by doing rails -v in your console)

This issue is probably due to the newly added Turbolinks gem. It makes your application behave like a single page JavaScript application. It has a few benefits (it's faster), but it unfortunately breaks some existing events like $(document).ready() because the page is never reloaded. That would explain why the JavaScript works when you directly load the URL, but not when you navigate to it through a link_to.

Here's a RailsCast about Turbolinks.

There are a couple solutions. You can use jquery.turbolinks as a drop-in fix, or you can switch your $(document).ready() statement to instead use the Turbolinks 'page:change' event:

$(document).on('page:change', function() {
    // your stuff here
});

Alternatively, you could do something like this for compatibility with regular page loads as well as Turbolinks:

var ready = function() {
    // do stuff here.
};

$(document).ready(ready);
$(document).on('page:change', ready);

If you are using Ruby on Rails >5 (you can check by running rails -v in the console) use 'turbolinks:load' instead of 'page:change'

$(document).on('turbolinks:load', ready); 

---

Related Topics