Rails With Jquery Turbolinks Correctly

Question

I've been struggling on understanding what and why my Js gets broken up between different page loads.

Currently I have a rails app with 4 different layouts ( The layouts are for special scripts and features based on the section of the app. For example Application Layout is different from my index lay out.

Even with the different layouts they load the application js and application cs files the same

My header

 <%= javascript_include_tag "application", async: true  %>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

All of my layouts are loaded like this except for my front page that uses a seperate js file.

 <%= javascript_include_tag "home", async: true  %> 

Navigating through the site it looks like all is well, but very quickly it seems turbo links breaks some js features on page change.

Currenly my application js looks as listed

    //= require jquery
    //= require jquery.turbolinks
    //= require jquery_ujs
    //= require jquery-ui
    //= require bootstrap-sprockets
    //= require_self
    //= require global
    //
    //= require browser_timezone_rails/set_time_zone
    //= require jstz
    //= require js.cookie
    //= require cocoon
    //= require bootstrap-tagsinput
    //= require datetime_picker_input
    //= require twitter/typeahead
    //= require twitter/typeahead.min
    //= require intlTelInput
    //= require libphonenumber/utils
    //= require underscore
    //= require gmaps-auto-complete
    //= require jquery.wookmark
    //= require jquery.facebox
    //= require social-share-button
    //= require chosen-jquery
    //= require raphael
    //= require morris
    //= require gmaps/google
    //= require turbolinks
    //= require sitewide

Sitewide and Global are the only custom files within my application js

   Sitewide.js 

   var App = {
onLoadFns: [],

onPageLoad: function(callback) {
    this.onLoadFns.push(callback);
},

load: function() {
    _.each(this.onLoadFns, function(callback) {
        callback.call(this);
    }, this);
}
};

$(function() {

Turbolinks.enableProgressBar();

// Called everytime turbolinks loads a new page
$(document).on("page:load", function() {
    App.load();
});

// Called on initial full page load
//
// defer is used to allow all features to register
// their page load callbacks before App.load runs
_.defer(function() {
    App.load();
 });
  });


 $(document).on('page:fetch', function() {
 $(".loading-indicator").show();
  });
$(document).on('page:change', function() {
$(".loading-indicator").hide();
});

And Global contains the code for gmaps auto complete

    jQuery(function() {
   var completer;

   completer = new GmapsCompleter({
   inputField: '#gmaps-input-address',
  errorField: '#gmaps-error'
  });

completer.autoCompleteInit({
country: "us"
});
 });

My issues are the js breaks when changing pages, I don't know if my issue is more deeper than the arrangement of the application js but it seems like from all the tutorials. After searching through almost all I can find that includes how to handle Jquery turbolinks with turbolinks. including linked below

http://joshfrankel.me/blog/2015/fix/rails-4-turbolinks-fix-for-jquery-only-working-after-hard-refresh/

Rails 4: how to use $(document).ready() with turbo-links

But none seems to be helping my issue. I'm also having the thoughts that organizing according to turbolinks is half the issue , andd that I also need to organize imported js from gems . Which I can't find anything with on how to organize imported gems to work with turbolinks and jquery turbolinks. ANy help would be seriously much appreciated. I've been dealing with this issue and winning short battles for it only to come bite me in the butt later.

So any help on how to arrange my application js or anything I'm sort of doing wrong with my layouts because I am lost.

Thanks friends!

Answer 1

I encountered the same problem and i was scratching my head what i did to break all pages that have js. The problem started when i updated my Turbolinks from 2.x to Turbolinks 5 The reasons for this is some of the events are different names or have been updated from the previous version. Thankfully, they included a shims that make old events mapped to the new events. you can look it here or copy and paste the code below, create a file say: compatibility.coffee and put it under javascripts/compatibility.coffee

{defer, dispatch} = Turbolinks

handleEvent = (eventName, handler) ->
  document.addEventListener(eventName, handler, false)

translateEvent = ({from, to}) ->
  handler = (event) ->
    event = dispatch(to, target: event.target, cancelable: event.cancelable, data: event.data)
    event.preventDefault() if event.defaultPrevented
  handleEvent(from, handler)

translateEvent from: "turbolinks:click", to: "page:before-change"
translateEvent from: "turbolinks:request-start", to: "page:fetch"
translateEvent from: "turbolinks:request-end", to: "page:receive"
translateEvent from: "turbolinks:before-cache", to: "page:before-unload"
translateEvent from: "turbolinks:render", to: "page:update"
translateEvent from: "turbolinks:load", to: "page:change"
translateEvent from: "turbolinks:load", to: "page:update"

loaded = false
handleEvent "DOMContentLoaded", ->
  defer ->
    loaded = true
handleEvent "turbolinks:load", ->
  if loaded
    dispatch("page:load")

jQuery?(document).on "ajaxSuccess", (event, xhr, settings) ->
  if jQuery.trim(xhr.responseText).length > 0
    dispatch("page:update")

Hope this helps you. good luck.

Answer 2

Try this approach.

http://brandonhilkert.com/blog/organizing-javascript-in-rails-application-with-turbolinks/

Found that author is using this method to build complex rails app with turbolinks.