jQuery Konflikt mit Lightbox / Thickbox dank prototype.js

Nov 30

WP-Plugins und Tuning Hinterlasse einen Kommentar

Nach nur etwa 8h Knobeln, tüffteln und googlen konnte ich endlich einen Bug in meinem Blog beheben, weshalb WP Ajax Edit Comments bei mir nicht laufen wollte.

Ajax Edit Comments ist generell ein super WordPress Plugin, mit welchem man es den Usern / Besuchern erlauben kann, dass diese Ihre Kommentare noch einige Zeit lang bearbeiten bzw. verändern können.

Dummerweise nutzt Ajax Edit Comments ein Java File namens jQuery.js, welches artverwandt zu prototype.js ist, welches Plugins wie Lightbox, Greybox oder auch Thickbox nutzen. Diese beiden Bibliothekdateien kommen sich bei paralleler Anwendung in die Quere.

In meinem Fall funktionierte Ajax Edit Comments nicht mehr, sobald MyGallery mit Lightbox 2 aktiv war. Erst nach langen Tests (alle Plugins deaktivieren und Stück für Stück reaktivieren) konnte ich den Fehler auf die MyGallery und eben Lightbox eingrenzen.

Der Grund für das Problem liegt in der Programmierung von jQuery und Prototype bzw. WordPress. Beide Bibliotheken werden durch die Variable $ angesprochen. Sowohl Lightbox als auch Ajax Edit Comments nutzen die Variable $ – wobei Lightbox hiermit die Prototype.js meint und Ajax Edit Comment die jQuery.js.

Da aber eine Variable nur durch einen Gegenwert besetzt werden kann, “blockierte” Lightbox die Variable $ mit der Prototype.js und jQuery konnte von Ajax Edit Comments nicht aufgerufen werden.

Die Lösung des Problems nennt sich jQuery no conflict bzw. jQuery.noConflict();

Auf der Lösungsseite stehen verschiedene Ansätze, wie man diese Doppelbelegung der Variable $ lösen kann. Der einfachste Weg hierbei: Man nutzt für jQuery einfach eine andere. z.B. $abc oder $123 etc. pp. – oder schreibt jQuery im Klartext statt $ – sieht dann so aus:

Man muss dafür Sorge tragen, dass zuerst die Prototype.js geladen wird.
Danach muss die jQuery.js geladen werden.
Damit die jQuery.js und die Prototype.js sich nicht in die Quere kommen, muss der Befehl jQuery.noConflict(); in der jeweiligen Datei, welche jQuery nutzt, vorangestellt werden bzw. ganz am Anfang geladen werden.
Nun muss man alle vorhandenen $ in der ausführenden Datei, die jQuery nutzt, in etwas anderes ändern. Geht am einfachsten durch “Suchen und Ersetzen”
Bei Prototype bleibt alles beim alten – das $ bleibt die Variable für Prototype.

Im Falle von Ajax Edit Comments sieht die Lösung wie folgt aus:

Die Dateien comment-editor.js und wp-ajax-edit-comments.js müssen mit dem Editor oder einem PHP Tool geöffnet und geändert werden. Befinden sich im Ordner: Plugins => Ajax Edit Comments => js
Die Bibliothek jQuery.js muss auf den Neuesten Stand (Version 1.2.6) gehoben werden. Befindet sich im Ordner wp-includes/js/jquery

Wer keine Lust hat an den Dateien herum zu doktern – hier meine Dateien zum herunterladen. jQuery dürfte mit WordPress 2.7 oder höher auch so funktionieren. Also zuerst die Ajax Edit Comments Dateien austauschen und gucken, ob es geht. Die Dateien stammen von Ajax Edit Comments 2.2.6 und werden aktuell gehalten!

comment-editor.js (rechte Maustaste => speichern unter)
wp-ajax-edit-comments.js (rechte Maustaste => speichern unter)
jQuery.js (rechte Maustaste => speichern unter)

Besonderen Dank an John Resig, der mir den Tipp mit der neuesten jQuery Version gab!

84 Kommentare zu “jQuery Konflikt mit Lightbox / Thickbox dank prototype.js”

51. Nils sagt:
Februar 17th, 2009 at 21:57
scheind mir so als müsste ich wie z.B. von dir das erste Kommentar freigeben und dann kannst du auch die ajax edit funktion verwenden
52. Hisky sagt:
Februar 17th, 2009 at 22:00
Hmmm. Vielleicht habt ihr beide in den Einstellungen von AEC den Punkt “Unbekannte Nutzer:
Jedem erlauben seine eigenen Kommentare zu editieren?” auf “Nein” gesetzt!?
53. Nils sagt:
Februar 17th, 2009 at 22:05
Dieser Punkt steht auf “ja”

Und meine vermutung ist richtig einmal freigeben von mir kann dieser bei seinem nächsten kommentar die edit funktion nutzten !
54. Hisky sagt:
Februar 17th, 2009 at 22:11
Gut. Dann ist es “nur” noch ne Einstellungssache.

Einstellungen => Diskussion =>
Bevor ein Kommentar erscheint, muss er von einem Administrator freigeschaltet werden.
muss bereits ein anderer Kommentar dieses Autors freigeschaltet worden sein.

Hier darf jeweils KEIN Haken sein.
55. Nils sagt:
Februar 17th, 2009 at 22:29
end and out thx

ich bin fix und foxie
56. Hisky sagt:
Februar 17th, 2009 at 22:32
Hauptsache es geht. Der Weg ist das Ziel usw.
57. Steffen Klaus sagt:
Februar 18th, 2009 at 11:12
So habe jetzt alles durchprobiert. Liegt an dem Plugin Lightbox 2. Sobald ich das deaktiviere, funktioniert AEC.
58. Hisky sagt:
Februar 18th, 2009 at 11:26
Komisch. Die dürften sich nicht mehr in die Quere kommen.

Sobald Du meine drei Dateien oben übernimmst, muss jQuery bzw. AEC gehen.
59. Steffen Klaus sagt:
Februar 18th, 2009 at 12:07
Hat auch nur auf meinem Testblog funktioniert. Wenn ich es auf meinem Blog Lightbox abschalte, bringt auch das nichts. Auf dem Testblog ist dasselbe Theme, gleiche Einstellungen, gleiche Plugins installiert. Wo werden eigentlich die Einstellung von AEC gespeichert? Bei mir werden trotz Deinstallation des Plugins, bei einer Reaktivierung die gleichen Einstellungen vorgenommen.

*fragend*
steffen
60. Hisky sagt:
Februar 18th, 2009 at 12:26
Komisch. Kann es sein, dass Du bei dem echten, richtigen Blog irgendeinen Cache aktiviert hast oder die Dateien nicht überschieben wurden?

Ich schätze AEC legt in der wp-options seine Daten ab.
61. Steffen Klaus sagt:
Februar 18th, 2009 at 12:33
Irgendeinen Cache? Keine Ahnung, ein Cache Plugin habe ich jedenfalls nicht installiert. Soll ich die wp-options aktuallisieren?
62. Hisky sagt:
Februar 18th, 2009 at 13:07
Cache ist meines Wissens seit 2.6 automatisch dabei und aktiv.

Guck mal ob Du diesen Ordner mit Inhalt hast:
wp-content/cache

Dann eben Lightbox 2 deaktivieren, Cache löschen (also den Inhalt des Ordners) und es sollte erstmal gehen. Dann können wir den Fehler auf Lightbox eingrenzen.
63. Steffen Klaus sagt:
Februar 18th, 2009 at 13:16
Diesen Ordner habe ich nicht.
64. Hisky sagt:
Februar 18th, 2009 at 18:58
Kannst Du bitte mal das calendar.js Plugin deaktivieren oder deinstallieren?

Bringt auf jeden Fall eine Fehlermeldung und blockt eventuell jQuery,
65. Steffen Klaus sagt:
Februar 19th, 2009 at 14:22
Habe ich auch schon probiert, führt aber auch nicht zu einer Änderung.
66. Hisky sagt:
Februar 19th, 2009 at 18:16
Das Ding macht bei Dir aber immernoch Fehler:
http://blog.suxess24.com/wp-content/plugins/cforms/js/calendar.js/eval/tXbhKJiBepkhnqzBDZbjnQ%3D%3D

Bitte hau das Ding mal raus, sonst kann ich nichts prüfen.
67. KRiZZi sagt:
Februar 20th, 2009 at 15:32
@Hisky: Unter 2.7.1 krieg ich die 2.2.6.0 aber auch nur noch ins Rennen, wenn ich Lightbox 2 komplett deaktiviere. Was also unter 2.7 noch funktionierte, jetzt funktioniert es nicht mehr.

Ich werd jetzt einfach auf ne ältere AEC-Version zurückgreifen, das wird mir langsam zu viel Gebastel!
68. Hisky sagt:
Februar 20th, 2009 at 21:27
Wirre Sache das. Eigentlich überschreibt 2.7.1 eben nur die jQuery.js – dachte ich.

Wenn AEC nicht weiter angepasst wird, war es das wohl für das tolle Plugin
69. KRiZZi sagt:
Februar 20th, 2009 at 21:35
Hab das Problem nun doch anders umschifft, AEC 2.2.6.0 ist weiter im Einsatz, dafür musste Lightbox 2 0.7 gehen. Dafür hab ich jetzt Fancybox, was zwar auch jquery.js nutzt, aber nicht mit AEC kollidiert!

edit: Warum das allerdings nicht angepasst wird, ist mir auch ein Rätsel. Der Autor weiss ja bescheid.
70. Zegger sagt:
Februar 21st, 2009 at 10:47
mit Shadowbox JS scheint das ganze auch zu laufen
71. Kommentare bearbeiten! | BlogFrosch sagt:
März 15th, 2009 at 13:02
[...] Lösung des Problems bietet Hisky: jQuery no conflict. Bei mir funktionierte diese Lösung zwar, allerding gab es danach ein [...]
72. Hisky sagt:
April 2nd, 2009 at 00:01
Gute Nachrichten. Der neue Programmierer hat den Bug wohl behoben.
Die neueste AEC bzw. Ajax Edit Comments Version läuft bei mir mit 2.7.1
73. Update auf Wordpress 2.7.1 - gute Version! sagt:
April 2nd, 2009 at 22:55
[...] größte Sorge galt dem geliebten Ajax Edit Comments Plugin. Hatte [...]
74. mein gott und meine welt » Neues Theme und neues Lightbox-Plugin « sagt:
Mai 2nd, 2009 at 07:30
[...] auf einmal nicht mehr. Nach einer kurzen Suche fand ich einen Hinweis, wo das Problem liegt: “jQuery Konflikt mit Lightbox / Thickbox dank prototype.js” [...]
75. KRiZZi sagt:
November 16th, 2009 at 17:14
Ich krieg noch komplett die Krise. Jetzt hab ich unter WP 2.8.6 und AEC 3.0.1 schon wieder das Problem, dass die Buttons nur im Backend zu sehen sind. Bis vor kurzem hat das noch geklappt.

Hat noch jemand ähnliche Erfahrungen?