Search code examples
javascriptjqueryruby-on-railsjquery-mobileturbolinks

Turbolinks wipes out jQuery Mobile classes

When I load a page in my rails app using Turbolinks, the DOM lacks the styles that are normally applied by jQuery Mobile. All of my JavaScript files run; the only problem is that I lose some of the styles I need for the JavaScript to actually work.

For example, with Turbolinks, my header is:

<a rel="external" href="/">MY SITE</a>

Without, it is:

<a rel="external" href="/" class="ui-link">MY SITE</a>

I have confirmed that my JS files are running with Turbolinks. The trouble is that the expected jQuery Mobile classes don't exist.

I'm not sure how to ensure the application of these classes when a Turbolink is clicked. I would appreciate any suggestions as to the right direction or area.

I've tried wrapping JavaScript in the following ways:

$(document).ready(function () {
  //functions
});

and:

$(document).on('turbolinks:load', function() {
  //functions
});

I've wrapped coffeescript in the same:

ready = ->
  #coffee
$(document).on('turbolinks:load', ready)

Both seem to work for my normal JS/coffeescript activities, so that is not the issue--it's only the jQuery Mobile classes that are lost.

My application.js file is:

//= require jquery
//= require jquery_ujs
//= require jquery.mobile
//= require js-routes
//= require turbolinks
//= require twitter/bootstrap
//= require_tree .

I've tried reordering these a few different ways to no avail.

All my JavaScript is written in app/assets/javascripts/base.js, and there are several coffeescript files in app/assets/javascripts.

I tried using jquery-turbolinks, but it didn't help, nor does it seem designed to sovle the root problem here, so I removed it.

I've also run bundle exec rake assets:precompile (:clean, :clobber) many times, so I don't think this is the issue.

This is all in development, but the problem also exists in production.

Solution

  • The "answer" is that Turbolinks and jQuery Mobile do many of the same things (both replace full page loads with AJAX), and one does not need to use both, and they are not designed to work together. JQM is better suited for a site that has to be mobile optimized (most sites?).

    I uninstalled Turbolinks, and everything was solved.

    Please correct anything I've mischaracterized.