Loading javascript with turbolink plugin

Question

I know there is jQuery-turbolinks. But is there anyway to use jQuery and JS with turbolink.

With Turbolinks pages will change without a full reload, so you can't rely on DOMContentLoaded or jQuery.ready() to trigger your code. Instead Turbolinks fires events on document to provide hooks into the lifecycle of the page.

I had this piece of code, but this did not load on navigating to other url.

$(function() {
  return $('.status').hover(function(event) {
    return $(this).toggleClass("hover");
  });
});

Are you asking if there is a way to use that function with only turbolinks?? Because it should work with both turbolinks and jquery-turbolinks after including jquery.turbolinks in your application.js file. — Justin
– Justin, Commented Apr 3, 2014 at 13:05

Oscar Barrett · Accepted Answer · 2014-04-03 13:18:15Z

2

You can do the following to run your javascript on both page:load and ready.

$(document).on('page:load ready', function() {
    ...
});

answered Apr 3, 2014 at 13:18

Oscar Barrett

3,27534 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shane Over a year ago

What is this page:load ? Is it a jQuery thing or turbolinks?

Oscar Barrett Over a year ago

It's a browser event provided by turbolinks, triggered when you navigate to a different page.

Rajdeep Singh · Accepted Answer · 2014-04-03 13:16:20Z

1

Try it out ;)

var ready;
ready = function() {
  $(function() {
    return $('.status').hover(function(event) {
      return $(this).toggleClass("hover");
    });
  });
};
$(document).ready(ready);
$(document).on('page:load', ready);

edited Apr 3, 2014 at 13:16

answered Apr 3, 2014 at 13:11

Rajdeep Singh

17.9k6 gold badges58 silver badges80 bronze badges

1 Comment

Shane Over a year ago

What is this page:load ? Is it a jQuery thing or turbolinks?

will · Accepted Answer · 2016-10-17 17:29:08Z

0

This doc showing how to: https://github.com/turbolinks/turbolinks

document.addEventListener("turbolinks:load", function() {
      // ... Your code here!
    })

answered Oct 17, 2016 at 17:29

will

13 bronze badges

Collectives™ on Stack Overflow

Loading javascript with turbolink plugin

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related