Ich habe eine Rails 4-Anwendung erstellt und eine Fancybox-Bibliothek für einen Bild-Popup-Effekt hinzugefügt. Es funktioniert einwandfrei, aber nur, wenn die Seite aktualisiert wird. Wenn die Seite vom Benutzer nicht aktualisiert wird, funktioniert die Abfrage überhaupt nicht. Ich habe versucht, es auch mit kleinen jquery-Methoden zu testen, aber alle funktionieren erst nach der Seitenaktualisierung. Ich benutze auch Twitter Bootstrap.
Meine Assets / application.js-Datei:
//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
$(document).ready(function() {
$(".fancybox").fancybox();
$("#hand").click(function(){
if($("#check6").is(':visible'))
{
$("#check6").hide();
}
else
{
$("#check6").show();
}
});
});
assets/javascript/application.js
Datei (Zeile 5//= require turbolinks
) und lassen Sie es mich wissen :)Antworten:
Okay, ich glaube, ich verstehe Ihr Problem genug, um eine Antwort zu geben. Bei der Verwendung von Turbolinks funktionieren die meisten Plugins und Bibliotheken, die an das Ereignis "Dokumentbereit" gebunden sind, nicht mehr, da Turbolinks verhindern, dass der Browser die Seite neu lädt. Es gibt Tricks, um diese Probleme zu beheben, aber der einfachste Weg, dies zu beheben, ist die Verwendung von jquery.turbolinks .
Um es zu verwenden, fügen Sie dies einfach zu Ihrem
Gemfile
:gem 'jquery-turbolinks'
und das zu deiner
assets/javascripts/application.js
Akte://= require jquery.turbolinks
und du solltest gut sein zu gehen.
Zu Ihrer Information : Sie haben nicht wirklich brauchen turbolinks zu verwenden, aber es ist nützlich , und es macht Anfragen schneller durch eine vollständige Aktualisierung der Seite zu vermeiden. Turbolinks ruft den Inhalt des Links ab, auf den Sie über AJAX geklickt haben, und rendert ihn auf derselben Seite, wodurch der Aufwand für das erneute Laden von Assets (JS und CSS) entfällt. Versuchen Sie, Ihre Seite damit arbeiten zu lassen. Bei Verwendung der Bibliothek im vorherigen Absatz hatte ich keine wirklichen Probleme. Je mehr CSS und JS Sie auf Ihrer Seite haben, desto größer ist die Verbesserung, die Sie durch die Verwendung von Turbolinks erzielen.
quelle
//= require jquery.turbolinks
Bedürfnisse zu sein , nachdem//= require jquery
es an der Arbeit github.com/kossnocorp/jquery.turbolinksIan hatte eine gute Antwort, und diese ist eine Art Add-On dazu (SO werde ich zum Zeitpunkt des Schreibens niemanden wirklich kommentieren lassen.)
Von https://github.com/rails/turbolinks/#jqueryturbolinks :
Add the gem [gem 'jquery-turbolinks'] to your project, then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js: //= require jquery.turbolinks
Vorher hatte ich nicht
require jquery.turbolinks
an der richtigen Stelle in der Liste hinzugefügt , also war es ein bisschen wählerisch. Dann habe ich dies auf eine neue Art hinzugefügt und ich hoffe, es funktioniert besser.quelle
Ich konnte die Dinge nicht zum Laufen bringen, bis ich den Antworten von CodeWalrus und Ian gefolgt war, aber für mich war mehr dahinter. Wie in der Readme-Datei jquery.turbolinks beschrieben , muss die Reihenfolge sehr spezifisch sein.
//= require jquery //= require jquery.turbolinks //= require jquery_ujs // // ... your other scripts here ... // //= require turbolinks
Auch wie hier beschrieben , wenn Sie die Anwendung JavaScript - Link in der Fußzeile für Geschwindigkeit Optimierungsgründen setzen haben, wie ich hatte, müssen Sie es in die bewegen
<head>
Tag , so dass sie Lasten , bevor der Inhalt in dem<body>
Tag.quelle
Turbolinks sind hier das Problem. Turbolinks werden in Schienen hinzugefügt, um die Leistung der Webseite zu verbessern. Ich habe diese Lösung zum Laufen gebracht
<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>
Weitere Details finden Sie hier
quelle
Entfernen Sie diese Codezeile:
//= require turbolinks
Dann füge dieses hinzu:
//= require jquery.turbolinks
quelle