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.
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.
Share Improve this question edited Sep 22, 2014 at 5:33 mc9 asked Sep 22, 2014 at 5:15 mc9mc9 6,35113 gold badges53 silver badges96 bronze badges2 Answers
Reset to default 4Turbolinks
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:
- "Delegate" your JS from a consistent element (typically
document)- 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);
It might be a turbolinks issue. Try to follow to the solution of a similar problem
Rails javascript only works after reload