Not working with Twitter Boostrap 3 for affix, etc.

[supercodepoet]

The Affix plugin launches for any element that has data-spy="affix" but this is not getting launched after navigation to a page.

Currently have:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require underscore.1.6.0
//= require backbone.1.1.2
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree ../templates
//= require turbolinks

The Affix plugin has:

// AFFIX DATA-API
  // ==============

  $(window).on('load', function () {
    $('[data-spy="affix"]').each(function () {
      var $spy = $(this)
      var data = $spy.data()

      data.offset = data.offset || {}

      if (data.offsetBottom) data.offset.bottom = data.offsetBottom
      if (data.offsetTop)    data.offset.top    = data.offsetTop

      $spy.affix(data)
    })
  })

It appears it is using window object instead of document. Thoughts?

[chrisjacob]

+1

I'm new to Turbolinks... how do people deal with 3rd party libraries that use $(window).on('load', function() {});?

Here is a related post on the Turbolinks issue list (currently: Open) https://github.com/rails/turbolinks/issues/295

[chrisjacob]

You could use this hack (but probably shouldn't). It won't behave at all like Window.onload (i.e. it won't wait for Images, CSS, JS to be processed... it just triggers a fake Window.onload).

// see some output in your console when the window is loaded
$(window).on('load', function(){console.log('Window Loaded')});
// when you change to a new page via Turbolinks (cached or uncached) trigger the windows 'load' event
$(document).on('page:change', function(){ $(window).trigger('load'); });

Feels very dirty... there must be a better solution?

[chrisjacob]

Ok I think I have a better solution, see: https://github.com/rails/turbolinks/issues/295#issuecomment-70036212

When working with Turbolinks all JS and CSS is loaded in the header on the first page load (...or you could put your JS at the end of the body with data-turbolinks-eval="false"). Either way the first Window.onload behaves as normal for the first page loaded.

When you navigate to another page via Turbolinks the CSS and JS stays around... so the only hold up for Window.onload being fired should be Images that are in that new page's content. If we wait for those images to all load, then manually trigger the Window.onload event via $(window).trigger('load'); everyone is happy right?

@supercodepoet I know this ticket was posted a long time ago, but let me know if this helps solve the Bootstrap 3 issue you were having (or if you came up with another solution).

[chrisjacob]

FYI, I tested out my solution on a page with some large images and the Bootstrap Affix.js $(window).on('load'... was triggered as expected. :)

[sameerkhanna]

Another cause for this could be you have your javascript placed at the end of body. It should be in the head. I noticed this when bootstrap dropdowns would work on initial page load, but not after subsequent clicks.