Skip to content
This repository has been archived by the owner. It is now read-only.

Does not work with Rails 5 / Turbolinks 5 #56

Open
andrewhamon opened this issue Mar 20, 2016 · 20 comments

Comments

Projects
None yet
@andrewhamon
Copy link

commented Mar 20, 2016

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

This comment has been minimized.

Copy link

commented Mar 22, 2016

+1

1 similar comment
@dalpo

This comment has been minimized.

Copy link

commented Mar 24, 2016

👍

@rstacruz

This comment has been minimized.

Copy link
Collaborator

commented Mar 24, 2016

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 notifications@github.com
wrote:

[image: 👍]


You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#56 (comment)

@dsandstrom

This comment has been minimized.

Copy link

commented Mar 24, 2016

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

@dalpo

This comment has been minimized.

Copy link

commented Mar 25, 2016

Personally, I would love the rails 5 support 😃

@dsandstrom

This comment has been minimized.

Copy link

commented Mar 25, 2016

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

This comment has been minimized.

Copy link

commented Mar 26, 2016

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

turbolinks/turbolinks#9

@kossnocorp

This comment has been minimized.

Copy link
Owner

commented Mar 28, 2016

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 28, 2016

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 28, 2016

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

This comment has been minimized.

Copy link
Owner

commented Mar 28, 2016

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

@rstacruz

This comment has been minimized.

Copy link
Collaborator

commented Mar 28, 2016

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

@dsandstrom

This comment has been minimized.

Copy link

commented Mar 28, 2016

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

This comment has been minimized.

Copy link

commented Jul 29, 2016

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

This comment has been minimized.

Copy link

commented Sep 12, 2016

I wrote an easy solution here:
#61 (comment)

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

@ryanbelke

This comment has been minimized.

Copy link

commented Oct 23, 2016

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

@xiaohui-zhangxh

This comment has been minimized.

Copy link

commented Nov 18, 2016

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

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

This comment has been minimized.

Copy link

commented Dec 8, 2016

@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

This comment has been minimized.

Copy link

commented Mar 8, 2017

@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

This comment has been minimized.

Copy link

commented May 5, 2017

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.

joe4dev added a commit to sealuzh/cloud-workbench that referenced this issue Jul 11, 2017

Remove turbolinks globally
Some application javascript (e.g., Ace Editor) did not load initially
and a page reload was necessary every time.
It seems that the migration to `turbolinks:load` with Turbolinks version >=5
caused several issues on loading javascript and firing events:
* Turbolinks 5 discussion: kossnocorp/jquery.turbolinks#56
* Fixes bindings on `ready` event: https://github.com/wshostak/turbolinks-jquery
* Compatibility script: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

Removes the `page:load` listeners by replacing:
`$(document).on('ready page:load', function () {` with
`$(document).ready(function () {`

Removing all turbolinks related code fixed this issue.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.