Rails 4 Turbo-Link verhindert, dass jQuery-Skripte funktionieren

Baue ich eine Rails-4-app und ich habe ein paar verstreute js-Dateien, die ich versuche zu zählen "the rails way". Ich zog jquery-plugins in den /vendor/assets/javascripts und ich aktualisiert die manifest - (application.js) , die Sie benötigen. Wenn ich das laden der Seiten lokal sehe ich, dass Sie korrekt angezeigt.

Aber ich bin immer inkonsistente Verhalten von einem der Skripte, zusammengestellt. Ich habe ein controller-spezifisches js-Datei aufgerufen projects.js verwiesen wird in der application.js über die Verwendung von require_tree .:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require jquery.form.min
//= require_tree .

Sehe ich die Datei richtig, und es funktioniert... die Hälfte der Zeit. Die andere Hälfte der Zeit, die in Sachen projects.js scheint nicht, etwas zu tun (meist sind es jquery-Animationen und einige ajax-requests). Wenn es nicht funktioniert, werde ich klicken Sie auf die Tasten ein paar mal, wird nichts passieren, und dann werfe ich diese Fehlermeldung:

Uncaught TypeError: Cannot read property 'position' of null 
turbolinks.js?body=1:75

Das nie passiert, wenn die Skripte wurden in den einzelnen Ansichten (der falsche Weg), so bin ich ziemlich sicher, dass das problem nicht mit meinem javascript-code. Eine weitere potenziell relevante details ist, dass die Sachen in projects.js verpackt in einem $(document).ready(function(){. Auch bin ich mir Tests in der Entwicklung Modus, so dass die javascripts und css nicht in Verbindung mit dem asset-pipeline.

Irgendeine Idee, was hier Los ist? Ich bin neu auf Schienen, aber ich habe mein bestes getan, zu Folgen, alle Konventionen.

Update!

Vorhersagbar wenn mein Projekt Scripte nicht funktionieren. Die erste Seite geladen werden, funktioniert jedes mal. Dann klicke ich einen link auf eine neue Seite, welche verwendet meine project.js Verhaltensweisen und den zweiten Seite nie funktioniert. Ich klicke ein paar mal und irgendwann werfen Sie den oben genannten Fehler. Ich bin noch nicht sicher, warum, aber ich bin zu Ahnen, dies ist im Zusammenhang mit turbo-Verknüpfung.

InformationsquelleAutor der Frage emersonthis | 2013-09-12

  1. 43

    $(document).ready(function(){ funktioniert nicht wirklich mit Turbolinks. Turbolinks:

    ... macht die folgenden links in Ihre web-Anwendung schneller. Anstatt dass der browser den JavaScript-und CSS-zwischen jedem Seitenwechsel, hält die aktuelle Seite beendet und ersetzt nur den Körper und den Titel im Kopf.

    Also die Seite wird nur einmal geladen, und dann die Stücke werden nach Bedarf ausgetauscht. Seit die Seite wird nur einmal geladen, Ihre $(document).ready() Rückrufe werden nur ausgelöst, wenn die Website ist zunächst besucht, wirst du nicht mehr bekommen, document-ready-Ereignisse beim Umschalten der Seiten, da Turbolinks nicht wirklich Umschalten der Seiten. Aus der Handbuch:

    Mit Turbolinks-Seiten ändern, ohne neu laden, so dass Sie können nicht Sie verlassen sich auf DOMContentLoaded oder jQuery.ready() zum auslösen der code. Stattdessen Turbolinks feuert Veranstaltungen auf Dokument Haken in den Lebenszyklus der Seite.

    Werden Sie wahrscheinlich wollen, um zu hören für eine der Turbolinks Veranstaltungen statt:

    • page:change die Seite analysiert wurde verändert und auf die neue version und auf DOMContentLoaded
    • [...]
    • page:load ausgelöst wird am Ende des Ladevorgangs.

    page:change ist in der Regel, was Sie suchen, wie es wird ausgelöst, wenn beim laden eine frische Seite und der Wiederherstellung von einer Seite aus die Turbolinks-page-cache.

    Möchten Sie vielleicht zu deaktivieren, Turbolinks, bis Sie hatten Zeit, um überprüfen alle Ihrer JavaScript-und du hast getan, eine vollständige QA-sweep. Sie sollten auch testen Ihrer Website-Geschwindigkeit zu sehen, ob es sich lohnt, mit auf alle.

    Andere Möglichkeit wäre die Verwendung von jquery.turbolinks zu Flicken, Dinge für Sie. Ich habe nicht verwendet diese aber andere Menschen verwenden Sie es, um gute Wirkung.

    InformationsquelleAutor der Antwort mu is too short

  2. 28

    Einer Lösung schon in dieser railscast

    Hier ist ein Beispiel (auf die ich gerne verwenden).

    ready = ->
  # ..... your js

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

    Es ist auch ein Juwel , löst dieses Problem in einer Weise, die Sie halten, tut es die alte Weise. Es funktioniert wirklich gut 🙂

    InformationsquelleAutor der Antwort Ole Henrik Skogstrøm

  3. 1

    Ich merke diese Antwort ist REAAAAAAALLLLLLLYYYYY Spät... aber ich dachte, ich würde es hinzufügen.

    Ich nur hatte dieses Problem Letzte Woche.. Beim Versuch Sie zu bekommen-Stiftung zu arbeiten..

    Zuerst habe ich Hinzugefügt:

    gem 'jquery-turbolinks'

    Dann legte es in application.js etwa so: 

    //= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

    und dann habe ich diese direkt darunter: 

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

});

    und alles, was für mich gearbeitet. Hoffe, das hilft!

    InformationsquelleAutor der Antwort Shawn Wilson

Schreibe einen Kommentar