Select2 mit ajax wird mehrmals mit Rails-Turbolinks-Ereignissen initialisiert
Ich entwickle eine Ruby On Rails App mit Rails 4.2.6. Ich benutze Turbolinks neben jquery.turbolinks (leider konnte ich die Links zu diesen Elementen nicht posten, da ich ein Neuling auf der Seite bin). Mein Problem ist sehr einfach, aber ich kann es einfach nicht lösen. Hier ist es: Ich habe ein Formular, das durch AJAX geholt wird
%Vor%Das Formular enthält Select2-Elemente, die ihre Daten durch AJAX
erhalten %Vor%- Die Select2-Elemente sind derzeit bei Rails Trubolinks-Ereignissen "Seite: Seite laden: Update" aktiviert, aber ich habe auch "Seite: ändern" ausprobiert
- Wenn das Formular abgerufen wird: Die select2-Elemente sind in Ordnung (korrekt aktiviert):
Mein Problem tritt auf, wenn ich versuche, den Select2 einzugeben, der AJAX verwendet, um die Daten zu erhalten: Alle select2s sind dupliziert:
Hier ist, wie ich das Select2 initialisiert bekomme:
%Vor%Ich möchte, dass die Select2-Elemente nur einmal initialisiert werden (wenn das Formular abgerufen wird), und nicht auf AJAX-Antworten, wenn sie ihre Daten erhalten. Ich habe jQuery.not (". Select2-hiden-accessible") für die Elemente using Select2 (select2-hidden-accessible ist die Klasse Select2 fügt zu einem initialisierten Element Select2) versucht, aber es funktioniert nicht.
Vielen Dank für Ihre freundliche Hilfe!
4 Antworten
Wenn Sie Turbolinks 5 und select2 verwenden, ist das select2 -Objekt nicht mehr an den <select> angehängt (siehe unten für den Test), wenn Sie mit der Zurück-Taste zu einer Seite zurückkehren. Ein neues select2 -Objekt wird nach dem Zurückgehen erstellt und angehängt, aber es war unbrauchbar.
Jacks Antwort funktionierte nicht für mich, denn wenn das neue select2 -Objekt hinzugefügt wird, hat das <select> immer noch class='select2-hidden-accessible' welches unter anderem width: 1px !important setzt. Wenn das neue Objekt select2 erstellt wird, ist es praktisch unsichtbar.
Der Schlüssel für mich war, alle select2-Objekte zu zerstören, bevor TL die Seite zwischenspeichert . Hier ist die Lösung, die für mich funktioniert hat:
%Vor%Weitere Details
Ich glaube, dass dies der richtige Ansatz ist, wenn man die Turbolinks-Dokumentation (Schwerpunkt) betrachtet meins):
Vorbereiten der zu cachenden Seite
Achten Sie auf die Turbolinks: Vor-Cache-Ereignis, wenn Sie sich vorbereiten müssen das Dokument vor Turbolinks speichert es. Sie können dieses Ereignis verwenden, um Formulare zurücksetzen, erweiterte UI-Elemente reduzieren, oder alles abreißen Widgets von Drittanbietern , damit die Seite wieder angezeigt werden kann.
Testen von select2 Existenz
Um zu testen, ob das Objekt select2 an <select> angehängt ist, können Sie Folgendes in der Konsole ausführen:
Ich habe das gleiche Problem, und ich habe festgestellt, dass beim Drücken der Zurück-Taste sowohl die select als auch die select2 Elemente gerendert werden, aber nicht miteinander verbunden sind. Wenn Sie es mit $('select).select2() neu initialisieren, wird es erstellt ein brandneues select2 Element daneben.
Also, was ich getan habe, bevor ich select2 initialisiert habe:
Wenn die select keine select2 ist (d. h. $(el).data('select2') == undefined ), aber ein select2 -Element daneben steht, dann entferne sie.
Nichts hat hier für mich funktioniert.
Ich konnte das umgehen, indem ich die Seite nicht mit der Auswahl zwischenspeichern konnte.
Ich benutze das oben auf der Seite mit der Option: <% provide(:no_cache, true) %>
Ich benutze dies für application.html.erb :
Tags und Links javascript ruby-on-rails jquery-select2