Nov 30

jQuery Konflikt mit Lightbox / Thickbox dank prototype.js

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:

  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!


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

  1. 76. Hisky sagt:
    November 16th, 2009 at 17:42

    Ich hab noch die uralte AEC Version laufen. Never change… ;)

    Hast Du denn alle CSS Dateien vom AEC auf CHMOD gesetzt? (welcher CHMOD weiß ich nicht mehr, 755 müsste es sein)

  2. 77. KRiZZi sagt:
    November 16th, 2009 at 18:01

    Nö, aber haben Files nicht normalerweise 644? Ich probier das mal, THX!

    Welche Version hast du denn genau im Einsatz?

    edit: Selbst mit 777 geht nix. :(

  3. 78. KRiZZi sagt:
    November 16th, 2009 at 18:17

    OK, mit der 2.1.2.0 klappt das dann auch wieder, das hatte ich ja früher schonmal. Aber der Weisheit letzter Schluss ist das ja nun auch nicht.

    Ich hab aber auch sonst groß keine ajaxlastigen Plugins im Rennen. jQuery wird ja mittlerweile fast überall genutzt. Ich verzweifle noch an dem Thema… :evil:

  4. 79. Hisky sagt:
    November 16th, 2009 at 21:43

    Bei mir läuft Version 2.3.2.1 DE-Edition – an der ändere ich auch nichts, da diese wirklich 1a läuft :thumb:

  5. 80. Anodyne sagt:
    April 9th, 2010 at 03:07

    Hallo, nett zu hören, daß noch andere Stunden verbringen um Probleme dieser Art zu lösen. :wink:
    es geht aber auch ohne die ganzen $ zu ersetzen, z.B. so :

    <script type="text/javascript">
$.noConflict();
 jQuery(document).ready(function($) {......});
</script>

    Danke für den Post,
    Grüße,
    Anodyne

  6. 81. Tom sagt:
    April 15th, 2010 at 14:50

    top Gedankenanstoß!!! Merci :thumb:

  7. 82. Symfony - jQuery Prototype clash | ausgebloggt.de sagt:
    April 23rd, 2010 at 12:43

    [...] Direkt der erste Treffer meiner Suche bestätigt meine Vermutung. Sowohl jQuery, als auch Prototype nutzen das $-Zeichen als Funktionsnamen. Lösungen des Problems war schnell gefunden, nach 21 Uhr Feierabend sah das mir aber nicht mehr aus. Doch ich irrte mich, um 21 Uhr sollte ich auf dem Heimweg sein. [...]

  8. 83. Ersatz für Ajax Edit Comments gefunden! sagt:
    Juli 18th, 2010 at 21:06

    [...] hatte ich mit AEC auch so meine Probleme, aber danach lief es konstant. Bis zum Update auf WordPress 3.0. Scheinbar mag das Theme oder eine [...]

Seiten: « 1 2 3 [4] Zeige alle

Hinterlasse einen Kommentar