JQuery wird nur bei der Seitenaktualisierung in der Rails 4-Anwendung geladen

78

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();
      }
    });
});

jquery twitter-bootstrap ruby-on-rails-4

— vishB
quelle

6

Funktioniert es beim Laden der ersten Seite und wenn Sie auf einen anderen Link klicken, funktioniert dies nicht? Ich denke, Sie haben ein Problem mit der Turbolink-Bibliothek. Entfernen Sie diese Zeile aus Ihrer assets/javascript/application.jsDatei (Zeile 5 //= require turbolinks) und lassen Sie es mich wissen :)

— Ian

Hey, dein Trick hat funktioniert, js wird gut geladen. Aber was ist mit Turbolinks, würde ich sie später nicht brauchen?

— vishB

2

Ich bin überrascht, dass dies kein sichtbareres / diskutiertes Thema ist ... Es ist so üblich, jQuery sowie Turbolinks zu verwenden

— Don Cheadle

180

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.jsAkte:

//= 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.

— Ian
quelle

Ich hatte genau dieses Problem, und Sie haben es geschafft, danke Ian. Ich nahm an, dass jquery meine Ereignis-Listener nach einer link_to-Umleitung nicht an die Seite bindet, sondern nur auf einer Seite.

— Alex Neigher

4

okay , es funktioniert für aber zu beachten , dass //= require jquery.turbolinksBedürfnisse zu sein , nachdem //= require jquery es an der Arbeit github.com/kossnocorp/jquery.turbolinks

— Don Cheadle

Arbeitete für mich so danke, aber sollte hinzufügen, müssen Sie den Server neu starten (für Neulinge)

— GhostRider

Stellen Sie sicher, dass Sie / = erfordern jquery =)

— jfgrissom

groß. Danke für diese Info. Es hilft mir sehr.

— Nimish

17

Ian 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.turbolinksan 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.

— CodeWalrus
quelle

2

+1 für die zusätzlichen Informationen, meine Links funktionierten immer noch nicht, bis ich Ihre Antwort gelesen habe.

— pob21

8

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.

— Karen
quelle

Das hat bei mir funktioniert. Es scheint wichtig zu sein, die enthaltenen Javascrip-Dateien in den Kopf zu verschieben.

— Aboozar Rajabi

5

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

— Einhorn
quelle

1

Entfernen Sie diese Codezeile:

//= require turbolinks

Dann füge dieses hinzu:

//= require jquery.turbolinks

— Laurence Bautista
quelle