JQuery gets loaded only on page refresh in Rails 4 application
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();
}
});
});
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.
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.
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.