CODEWITHSUNDEEP
javascriptjqueryruby-on-railstwitter-bootstrap
mc9
mc9

Reputation: 6341

Javascript will only work after refreshing the page

I am using Bootstrap 3.2.0. I am trying to use two bootstrap javascript features together: Scrollspy and Affix. The goal is to make a scrollspy on the side that will scroll with the rest of the page using affix. Demo

Below is my javascript file, included in the head by Rails asset pipeline.

$(document).ready(function () {

  // Use affix plugin
  $("#sidebar").affix({
    offset: { top: 280 }
  });

  // Use Scrollspy
  $('body').scrollspy({ target: '#sidebar', offset: 200 });

}

The scrollspy works smoothly, but affix plugin does not, unless I refresh the page after initial loading. Using developer tools in chrome, I noticed that the javascript does not add affix-top to sidebar the first time page loads.

When I put the affix plugin javascript directly into the body, it works without refreshing. But I don't really want to use inline javascript. And I am really curious why this strange behavior is happening.

I am using Rails 4.1.5.

Upvotes: 3

Views: 4421

Answers (2)

Richard Peck
Richard Peck

Reputation: 76784

Turbolinks

The issue is almost certainly Turbolinks - a javascript library which is meant to speed up your pages by only retreiving the <body> tag from the new request, leaving the <head> intact.

Although Turbolinks is very effective, it does have a tendancy to "break" application functionality through not refreshing the Javascript on your page.

--

The issue is that because JS only binds to DOM elements which are loaded when the JS has been loaded. If Turbolinks loads new elements without refreshing JS, it inadvertently makes JS think that you have not refreshed your elements / page, thus preventing it from being able to "bind" to your new elements

The solution to this is two-fold:

  1. "Delegate" your JS from a consistent element (typically document)
  2. Use the Turbolinks "event hooks" to manage on-page JS events

Here's what I'd do:

#app/assets/javascripts/application.js
var loaded = function(){

  // Use affix plugin
  $("#sidebar").affix({
    offset: { top: 280 }
  });

  // Use Scrollspy
  $('body').scrollspy({ target: '#sidebar', offset: 200 });

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

Upvotes: 4

ProblemSlover
ProblemSlover

Reputation: 2537

It might be a turbolinks issue. Try to follow to the solution of a similar problem

Rails javascript only works after reload

Upvotes: 3

Related Questions