3

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.

mc9
  • 6,121
  • 13
  • 49
  • 87

2 Answers2

4

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);
Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • Thank you, I made it work by wrapping the whole code around `$(document).ready(function() {})` and `$(window).bind('page:change', function() {})` But your solution is much simpler. – mc9 Sep 22 '14 at 11:36
  • I just would like to wrap my head around the situation. My understanding of the issue is that I added new DOM elements after Turbolinks loaded the JS file, and JS file cannot bind to the new elements unless I refresh the page. Is that correct? – mc9 Sep 22 '14 at 11:42
3

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

Rails javascript only works after reload

Community
  • 1
  • 1
ProblemSlover
  • 2,538
  • 2
  • 23
  • 33