Javascript DOM events before and after Turbolinks cache

Question

Here I have:

$(document).on 'turbolinks:load', ->
  console.log "page has loaded!"
  $ ->
    $("button#show-hide").click (e) ->
      e.preventDefault()

which makes my click event available only after Turbolinks caches page. I can do $(document).on 'turbolinks:before-visit which will make event available only before Turbolinks caches. How should I make event available at all times?

score 1 · Accepted Answer · answered Oct 24 '17 at 08:01

I think the problem here is that you are binding to two events: turbolinks:load and $(document).ready().

Turbolinks does not discard event listeners on the document so you can safely bind click handlers to it and they will be called scross page loads. From the Turbolinks documentation:

When possible, avoid using the turbolinks:load event to add event listeners directly to elements on the page body. Instead, consider using event delegation to register event listeners once on document or window.

With this in mind, you can do:

$(document).on 'click', "button#show-hide", (e) ->
  e.preventDefault()

Faisal Umair · Answer 2 · 2017-10-23T05:42:16.827

0

How about you simply take the click event out of the 'turbolinks:load' and

'turbolinks:before-visit' context.

or If the button is added dynamically in the DOM, what you can do is attach a click handler to body and on click determine which element was clicked and proceed accordingly.

$('body').on('click','button#show-hide',function(){

});

In coffee script, you can do

$('body').on('click', 'button#show-hide', ( ->

));

UPDATE

From the answer on Rails, javascript not loading after clicking through link_to helper

If you want your click handlers to work on page:change and as well as on ready event you can do,

var ready = function() {
    // bind click handlers to DOM elements here
};

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

edited Oct 23 '17 at 05:42

answered Oct 23 '17 at 05:11

Faisal Umair

381
2
5

As from application.js - `//= require turbolinks //= require_tree .` I think because of this (turbolinks are being loaded first), my Js files where I bind to DOM elements does not work unless page reload – Julius Dzidzevičius Oct 23 '17 at 05:26
This might help you https://stackoverflow.com/questions/17600093/rails-javascript-not-loading-after-clicking-through-link-to-helper – Faisal Umair Oct 23 '17 at 05:28
`ready` fire only in response to the initial page load—not after any subsequent page changes. So AFAIK, in my case it does the same as `load` that I tried before. But thanks for efforts – Julius Dzidzevičius Oct 23 '17 at 10:18
Well there is also page:change event in the answer, both ready and page:change event call the ready function. – Faisal Umair Oct 23 '17 at 10:20
Nah, I think the problem is that you just can't bind to DOM event from Js/coffee file, so easily if Turbolinks does caching – Julius Dzidzevičius Oct 23 '17 at 10:31
I see, I am glad you got it working though using the inline click handler. :) – Faisal Umair Oct 23 '17 at 10:33
I hope someone will suggest a better answer, though :) – Julius Dzidzevičius Oct 23 '17 at 10:33
Yeah, you can also give this a read http://railscasts.com/episodes/390-turbolinks for reference. – Faisal Umair Oct 23 '17 at 10:35

Javascript DOM events before and after Turbolinks cache

2 Answers2

Linked