JQuery gets loaded only on page refresh in Rails 4 application

Question

I have created a Rails 4 application and have added fancybox library for an image popup effect. It works fine but only when the page is being refreshed. If the page is not refreshed by the user then the jquery does not work at all. I tried testing it with small jquery methods also but all work only after page refresh. I am also using twitter bootstrap.

My assets/application.js file :

//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .


$(document).ready(function() {
  $(".fancybox").fancybox();
    $("#hand").click(function(){
     if($("#check6").is(':visible'))
     {
      $("#check6").hide();
      }
     else
     {
      $("#check6").show();
      }
    });
});

Does it work on the first page load and when you click another link it doesn't? I think you have an issue with the turbolinks library. Remove that line from your `assets/javascript/application.js` file (line 5, `//= require turbolinks`) and let me know :) — Ian, Jul 26 '13 at 13:59
Hey your trick worked, js is loading fine. But what about I turbolinks wouldn't I be needing it later ? — vishB, Jul 29 '13 at 07:11
I'm surprised this isn't a more visible / discussed topic... It's so common to be using jQuery as well as Turbolinks — Don Cheadle, Feb 26 '15 at 21:13

Ian · Accepted Answer · 2013-10-07T03:10:51.203

180

Okay, I think I understand your problem enough to provide an answer. The thing about using turbolinks is that most plugins and libraries that bind to the document ready event stop working, since turbolinks prevents the browser from reloading the page. There are tricks to fix those issues, but the easiest way to fix it is to use jquery.turbolinks.

To use it, just add this to your Gemfile:

gem 'jquery-turbolinks'

and this to your assets/javascripts/application.js file:

//= require jquery.turbolinks

and you should be good to go.

FYI: You don't really need to use turbolinks, but it's useful and it makes requests faster by avoiding a full page refresh. Turbolinks fetches the contents of the link you clicked via AJAX and renders it on the same page, thus eliminating the overhead of reloading assets (JS and CSS). Try to make your page work with it. Using the library in the previous paragraph I've had no real issues. The more CSS and JS you have on your page, the bigger the improvement you get by using turbolinks.

edited Oct 07 '13 at 03:10

answered Jul 29 '13 at 13:02

Ian

4,195
2
25
32

I had this exact problem, and you nailed it, thanks Ian. I figured jquery wasnt binding my event listeners to the page after a link_to redirect, and only on a pageload. – Alex Neigher Sep 13 '13 at 19:14
4

okay it worked for but important to note that `//= require jquery.turbolinks` needs to be **after** `//= require jquery` for it to work https://github.com/kossnocorp/jquery.turbolinks – Don Cheadle Feb 26 '15 at 21:08
Worked for me so thanks, but should add you need to restart the server (for newbies) – GhostRider Mar 02 '15 at 12:05
Be sure to remove /= require jquery =) – jfgrissom Jan 31 '16 at 23:13

score 17 · Answer 2 · answered Mar 13 '14 at 08:21

Ian had a good answer, and this one is an add-on of sorts to that (SO won't let me actually comment to anyone at time of writing.)

From https://github.com/rails/turbolinks/#jqueryturbolinks :

Add the gem [gem 'jquery-turbolinks'] to your project, then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js:

//= require jquery.turbolinks

Before I hadn't added require jquery.turbolinks in the right spot within the list, so it was being a bit picky. Then I added this a new way and I hope it works better.

+1 for the extra info, my links still weren't working until I read your answer. — pob21, Apr 11 '14 at 05:28

score 8 · Answer 3 · answered May 21 '15 at 17:36

I couldn't get things working until I followed both CodeWalrus's and Ian's answers, but for me there was more to it. As described on the jquery.turbolinks Readme, the order must be very specific.

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

Also, as described here, if you have put the application javascript link in the footer for speed optimization reasons, as I had, you will need to move it into the <head> tag so that it loads before the content in the <body> tag.

This worked for me. It seems that it's essential to move included javascrip files to the head. — Aboozar Rajabi, Jun 21 '16 at 09:59

score 5 · Answer 4 · edited May 23 '17 at 12:18

5

Turbolinks are the problem here.Turbolinks are added in rails to improve performace of webpage.I have got this solution working

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>

Fore more details refer this

edited May 23 '17 at 12:18

Community

1
1

answered Dec 02 '15 at 17:09

Unicornz

61
1
5

score 1 · Answer 5 · edited Feb 02 '19 at 18:59

1

Remove this line of code:

//= require turbolinks

Then add this one:

//= require jquery.turbolinks

edited Feb 02 '19 at 18:59

Pierre.Vriens

2,117
75
29
42

answered Feb 02 '19 at 16:17

Laurence Bautista

11
1

JQuery gets loaded only on page refresh in Rails 4 application

5 Answers5

Linked