Schienen 5: Verwendung von $ (document) .ready () mit Turbo-Links

83

Turbolinks verhindern, dass normale $(document).ready()Ereignisse bei allen Seitenbesuchen außer dem anfänglichen Laden ausgelöst werden, wie hier und hier erläutert . Keine der Lösungen in den verknüpften Antworten funktioniert jedoch mit Rails 5. Wie kann ich bei jedem Seitenbesuch Code ausführen, wie in früheren Versionen?

AndrewH
quelle

Antworten:

167

Anstatt das readyEreignis anzuhören , müssen Sie sich bei jedem Seitenbesuch an ein von Turbolinks ausgelöstes Ereignis anschließen.

Leider wurde Turbolinks 5 (die Version, die in Rails 5 angezeigt wird) neu geschrieben und verwendet nicht dieselben Ereignisnamen wie in früheren Versionen von Turbolinks, sodass die genannten Antworten fehlschlagen. Was jetzt funktioniert, ist das Abhören der Turbolinks: Ladeereignis wie folgt :

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})
AndrewH
quelle
5
Ja. Auch hier erklärt. guides.rubyonrails.org/… . Überprüfen Sie 5.2 Seitenänderungsereignisse.
Indika K
3
Turbolinks: Ladenfeuer für mich vor Ort, aber nicht auf Heroku. Ich sehe meinen benutzerdefinierten Javascript-Code in meinen kompilierten JS-Assets, aber das Ereignis wird nicht ausgelöst.
Sparrow
das funktioniert nicht gut. Ich habe eine select2 und wenn ich die Seite und zurück wechsle, habe ich zwei select2 (dupliziert)
inye
3
Trotz der Aussagen des Rail-Dokuments verwende ich on('ready turbolinks:load')ansonsten einige Probleme auf einigen Seiten
Cyril Duchon-Doris
1
Hallo Cyril, ich habe das gleiche Problem, dh ich muss beim ersten Laden der Seite sowie bei Turbolinks auslösen: Laden. Ich habe eine Frage dazu auf SO, stackoverflow.com/questions/41421496/… gestellt . Haben Sie weitere Informationen darüber, warum dies so ist? Verwenden Sie JQuery-Turbolinks (ich bin). Das einzig gute ist, dass es sicherstellt, dass Ihr Code idempotent ist.
Obromios
58

Native JS:

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});
user464622
quelle
10

In Schienen 5 ist die einfachste Lösung:

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

Anstelle von $(document).ready. Klappt wunderbar.

Milad.Nozari
quelle
9
Nicht readyzur Liste hinzufügen , sonst wird die Funktion zweimal ausgeführt. Wie github.com/turbolinks/turbolinks/#observing-navigation-events sagte, sollten Sie es so machen: javascript $(document).ready(function() { $(document).on('turbolinks:load', function() {} ) })
Xiaohui Zhang
@ XiaohuiZhang Bist du sicher, dass das funktionieren wird? Denn wenn $(document).readyausgelöst wird, dann würde ich zumindest in meinen eigenen Szenarien nicht brauchenturbolinks:load
Milad.Nozari
@XiaohuiZhang Wenn Ihr Skript auf einer Seite mit Turbolinks und auf einer Seite ohne funktionieren muss, funktioniert dies nicht auf der Seite ohne, da das Ereignis
turbolinks
@escanxr Es funktioniert beides, du kannst es ausprobieren. weil Turbolinks immer das Ereignis "turbolinks: load" auslösen, wenn eine Turbolinks-Seite angezeigt wird oder nicht.
Xiaohui Zhang
2
@ XiaohuiZhang Ich habe es mit Turbolinks 5 versucht, es hat nicht funktioniert. Wenn Turbolinks auf der Seite deaktiviert sind, wird nur ein readyEreignis ausgelöst. Wenn es Turbolinks gibt, wird der Code zweimal aufgerufen
escanxr
9

Dies ist meine Lösung, überschreiben jQuery.fn.readyund $(document).readyfunktioniert dann ohne Änderung:

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn
Xiaohui Zhang
quelle
Genau das brauchte ich. Dies funktioniert für externe Bibliotheken, die ebenfalls auf documentRückrufen basieren. Warum das Downvote? Dies sollte sicher sein, solange Turbolinks während der gesamten Anwendung verwendet werden, oder?
Dylan Vander Berg
3

(Für Coffeescript)

Ich benutze: $(document).on 'turbolinks:load', ->

Anstatt: $(document).on('turbolinks:load', function() {...})

fcabanasm
quelle
Ich habe das getan und bekomme dieses Problem immer noch, wie @inye sagte: github.com/mkhairi/materialize-sass/issues/130 . Die Verwendung von JS oder Kaffee macht keinen wirklichen Unterschied, zumindest NICHT für mich.
Alexventuraio
2
Hallo Leute, was ist mit dieser Antwort im Allgemeinen falsch?
atw
Ich vermute, dass dies Coffeescript und kein natives Javascript ist? Ich gab es eine +1, weil dies genau das ist, was ich tue und es für mich funktioniert (in meiner Coffeescript-Datei)
aarona
ja!, es ist für coffeescript :). Mein Fehler war, es nicht zu spezifizieren
fcabanasm
2

Hier ist eine Lösung, die für mich funktioniert, von hier aus :

  1. Installieren gem 'jquery-turbolinks'

  2. Fügen Sie diese .coffee-Datei zu Ihrer App hinzu: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

  3. Nennen Sie es turbolinks-compatibility.coffee

  4. bei application.js

    //= require jquery
    //= require jquery_ujs
    //= require jquery.turbolinks
    //= require turbolinks
    //= require turbolinks-compatibility
ChaosPredictor
quelle
Was ist mit in productionenv? Hast du es ausprobiert? Es gibt einige Leute, die sagen, dass es im developmentModus gut funktioniert .
Alexventuraio
6
Der Edelstein ist veraltet
Mauro
1

Während wir auf die Lösung dieses wirklich coolen Edelsteins warten, konnte ich vorwärts gehen, indem ich Folgendes modifizierte:

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbo:ready', -> callback($)

zu:

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbolinks:load', -> callback($)

Ich bin mir noch nicht bewusst, was dies nicht löst, aber es schien bei der Erstinspektion gut zu funktionieren.

Jason Ihaia
quelle
-1

Verwenden Sie die leichten Edelstein- JQuery-Turbolinks .

Es macht $(document).ready() mit Turbolinks arbeiten, ohne den vorhandenen Code zu ändern.

Alternativ können Sie $(document).ready()zu einem der folgenden Elemente wechseln :

$(document).on('page:fetch', function() { /* your code here */ });

$(document).on('page:change', function() { /* your code here */ });

je nachdem, welches in Ihrer Situation besser geeignet ist.

Vadim
quelle
jquery-turbolinks unterstützt Turbolinks 5 noch nicht github.com/kossnocorp/jquery.turbolinks/issues/56
AndrewH
Du hast recht, @AndrewH! Hoffentlich wird die Unterstützung bald hinzugefügt.
Vadim
2
Das Juwel jquery-turbolinks ist veraltet.
Nathan V