0

I have an Rails application where in the application.js is specified following:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require gmaps/gmaps
//= require underscore
//= require_tree .

jQuery is loaded by the Rails system.

The problem is that some times it looks like jQuery is not loaded, because - for example - Google maps - are not working (and other jQuery-related stuff). After refresh/reload is everything working, but this behavior is very unpleasant.

As I have never met with this issue, I am not sure what could be wrong - I'll try to load jQuery from Google (through an HTML link in the header of the page), will see it if help.

However, haven't any of you guys faced this issue and have a tip to fix it?

Thank you

user984621
  • 46,344
  • 73
  • 224
  • 412
  • possible duplicate still you get help from this [http://stackoverflow.com/questions/23254379/sometimes-javascript-run-perfect-and-sometimes-not-in-ruby-on-rails-4] – Ajay Barot Jul 10 '14 at 12:52

1 Answers1

1

Turbolinks

The best tip I could give would be that it's a turbolinks issue:

After refresh/reload is everything working, but this behavior is very unpleasant.

What you've described is a typical hallmark of Turbolinks issues - basically when you use Turbolinks, it only reloads the <body> tag of your page through Ajax. This leaves the <head> tag intact, which makes Javascript think your page elements have not changed (thus preventing them from binding)

--

Fixes

The ways around this are either to use:

delegation

Because javascript can only bind events to elements present in the DOM, it will not be able to process any elements which appear after the DOM is loaded. To get around this, you can delegate your event bindings from a container which is there all the time, typically document:

$(document).on("click", "#your_element", function() {
   // do stuff here
});

--

Turbolinks events

Another method to get around this is to encapsulate your events inside functions, which can be called using Turbolinks events:

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

$(document).on("page:load ready", tester);

--

JQuery turbolinks gem:

#Gemfile
gem 'jquery-turbolinks'

#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require gmaps/gmaps
//= require underscore
//= require_tree .
Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • 1
    Thank you, Rich, for your message. I checked it deeper and when I am in the application and click on the logo (means it redirects me to the root of the application), then the jQuery events don't work. But when I make a refresh, it's working, so it's slightly different behavior than in the OP. However, I've tried to install the **jquery-turbolinks** gem, but it didn't help to solve the issue. – user984621 Jul 10 '14 at 10:02
  • Do you have any console errors or anything? I'm pretty sure it's a Turbolinks issue – Richard Peck Jul 10 '14 at 10:08