Does not work with Rails 5 / Turbolinks 5

[andrewhamon]

It looks like the latest version of Turbolinks doesn't use the same event names as before, causing this gem to not work with Rails 5.

[u007]

+1

[dalpo]

:+1:

[rstacruz]

Motioning to deprecate this gem and not implement support for rails 5. Anyone in favor/opposed? @kossnocorp

On Friday, March 25, 2016, Andrea Dal Ponte [email protected] wrote:

[image: :+1:]

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/kossnocorp/jquery.turbolinks/issues/56#issuecomment-201045993

[dsandstrom]

If this is deprecated, what should we use instead? Change our listeners to turbolinks:load?

[dalpo]

Personally, I would love the rails 5 support :smiley:

[dsandstrom]

This seems to work, add after requires in application.js: $.turbo.use('turbolinks:load', 'turbolinks:request-start')

Except I'm getting some leftover js validation errors after re-visiting a form. But it quickly resets after load.

Edit The leftover errors are present because they are getting cached by turbolinks. Here are some possible workarounds:

• Disable turbolinks caching on form pages.

Bottom of head tag on application.html.erb:

<%= content_for?(:head) ? yield(:head) : '' %>

Form views:

<% content_for :head do %>
  <meta name="turbolinks-cache-control" content="no-cache">
<% end %>

• Remove form errors before caching.

Bottom of application.js:

var resetForms = function () {
  // this depends on your use
  // this is for foundation 6's abide
  $('form').each(function () {
    $(this).foundation('destroy');
  });
};

document.addEventListener("turbolinks:before-cache", function() {
  resetForms();
});

[u007]

i added a work around, does this help? its in my comment somewhere at the bottom

https://github.com/turbolinks/turbolinks/issues/9

[kossnocorp]

Sorry, I'm not involved into Turbolinks world for three years already (I'm a React-hipster ¯_(ツ)_/¯) and it's hard to me to make an adequate conclusion regarding depreciation issue.

I completed trust @rstacruz, but I'll love to see jQuery Turbolinks moving forward while there are users. If there are people who want to take control over the project, please welcome (on any your conditions).

[rstacruz]

jQuery Turbolinks simply makes $(function) work like $(document).on('turbolinks:load'). There's no provision to teardown whatever was initialized using $(function).

As of Turbolinks 5, teardowns need to happen on turbolinks:before-cache.

Making jQuery Turbolinks work with Turbolinks 5 is not going to be simple.

jQuery Turbolinks's reason-for-living is these two things, as far as I'm concerned:

1. syntactic sugar to make $(function) easier to write.
2. make legacy plugins work.

As for (1), the additional abstraction isn't worth the small benefit of a few less bytes to write. As for (2), well, they're legacy... the responsibility to make them Turbolinks compatible should probably be better handled in those projects rather than a shim.

With that said, it should be easy to make jQuery Turbolinks work for TL5 by simply changing the event names, as others have noted. However, you'll likely run into some problems along the way as a result of the concerns above.

[rstacruz]

I'd like to offer an alternative to make jQuery + Turbolinks a little easier to deal with:

http://ricostacruz.com/onmount

It isn't a replacement for jquery.turbolinks, but it may address some of the reasons you might want to use jquery.turbolinks in the first place.

[kossnocorp]

@rstacruz it's possible to re-build jquery.turbolinks on top of onmount API to simplify migration?

[rstacruz]

@kossnocorp I'm not sure that's possible... the two of them work rather differently.

[dsandstrom]

As of Turbolinks 5, teardowns need to happen on turbolinks:before-cache.

Thanks for the link. So what I need to do for the form validation is destroy on turbolinks:before-cache and re-initialize on turbolinks:load.

[wshostak]

We recently implemented turbolinks 5 at work and this https://github.com/wshostak/turbolinks-jquery is the solution we came up with for dealing with jQuery on and ready. It allowed us to keep working with our current jQuery scripts/ plugins with out having to make changes to them. Thought I would share since seems like a few others like us could use it.

[Lowryderch]

I wrote an easy solution here: https://github.com/kossnocorp/jquery.turbolinks/issues/61#issuecomment-246404796

Basically add this file: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

[ryanbelke]

@Lowryderch that worked for me, using Rails 5 and Turbolinks 5 - Thanks a lot 💃

[xiaohui-zhangxh]

This is my solution, override jQuery.fn.ready:

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn

[drselump14]

@Lowryderch it works on local environment, but somehow doesn't work on staging/production environment.

Turbolinks 5.0.1

any suggestion will be appreciated

[merialvarado]

@wshostak solution worked for me. But I updated the code to handle events that are not String type( I encounter problem with datepicker ).

if (typeof events === 'string' || events instanceof String){
      var splitEvents = events.split(' ');
    }
    else{
      var splitEvents = Object.keys(events);
    }

[aldefouw]

Something that I did which seems to make them work properly on Rails 5 is the following:

function_name_here = ->

  #YOUR CODE HERE

$(document).ready(function_name_here)
$(document).on('page:load', function_name_here)


document.addEventListener('turbolinks:request-start', function_name_here)
document.addEventListener('turbolinks:load', function_name_here)

Not sure if this is a recommended way to do things, but it seems to work by putting the listener on.

I am running Rails 5.0 and turbolinks 5.0 in my gemfile.