jQuery Konflikt mit Lightbox / Thickbox dank prototype.js

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:

  1. Man muss dafür Sorge tragen, dass zuerst die Prototype.js geladen wird.
  2. Danach muss die jQuery.js geladen werden.
  3. 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.
  4. Nun muss man alle vorhandenen $ in der ausführenden Datei, die jQuery nutzt, in etwas anderes ändern. Geht am einfachsten durch “Suchen und Ersetzen”
  5. 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!

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