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!


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

  1. 26. Hisky sagt:
    Januar 11th, 2009 at 18:40

    Hmmm. Also meine jquery.js läuft super. Keine Probleme, zumindest keine, von denen ich weiß :D ;)

  2. 27. Lightbox hängt sich auf - Konflikt mit Picklens sagt:
    Februar 11th, 2009 at 21:27

    [...] WP-Plugins und Tuning Hinterlasse einen Kommentar Neu hier? Dann unbedingt den Feed abonnieren: RSS feed. Danke für den Besuch! Wie erst kürzlich berichtet macht das Plugin namens Lightbox Probleme mit jquery.js [...]

  3. 28. Tim sagt:
    Februar 13th, 2009 at 12:54

    Hey, vielen Dank für den Artikel!!! Bin schon verzweifelt an dem Problem!!! =)

  4. 29. Hisky sagt:
    Februar 13th, 2009 at 21:42

    Bin ich damals aus. Aber jetzt geht es ja :)

  5. 30. Nils sagt:
    Februar 17th, 2009 at 15:03

    Hab grad mal deine Anleitung befolgt leider ohne erfolg. Ich benutzte nur Lighbox 2 womit AEC Probleme haben könnte.

  6. 31. Hisky sagt:
    Februar 17th, 2009 at 15:23

    Hmmm. Hast Du die drei Dateien testhalber mal ausgetauscht? (immer vorher eine Sicherung machen)

    Und den Cache gelöscht?

    Sollte eigentlich gehen. Wie bei mir eben.

  7. 32. Nils sagt:
    Februar 17th, 2009 at 15:34

    Ich habe alle 3 Datein ausgetauscht hab sogar die neuste Version von jquery.js genommen. Habs aber mit deiner Version probiert, nichs. Habe ebend grade mal ein paar Plugins deaktiviert und getestet nichs. Wenn ich auf der Frontent Site eingeloggt bin funktioniert ja Ajax aber wenn mal als unbekannter User ein Kommentar macht dann geht nix.

    Probiers einfach aus…

    edit: will auch =)

  8. 33. Steffen Klaus sagt:
    Februar 17th, 2009 at 15:47

    Ich habe auch schon alles Mögliche versucht, leider ohne Erfolg – habe es jetzt aufgegeben.

  9. 34. Nils sagt:
    Februar 17th, 2009 at 15:50

    Ich mein auch schon ohne die Funktion das unregistrierte User ihren Kommentar editieren können ist es immernoch ein sinnvolles Plugin!

  10. 35. Hisky sagt:
    Februar 17th, 2009 at 18:50

    @Nils
    Wenn es das Frontend ist, stört ein anderes Plugin.
    Mache alle anderen Plugins aus, löschen den Cache auf dem Server und aktualisiere die Seite. Und aktiviere testhalber ein anderes Theme.

    @Steffen
    Kannst Du es bitte mal kurz aktivieren? Will mir nur den Quelltext ansehen bzw. die Seite mit Firebug angucken, woran es hängt.

  11. 36. Steffen Klaus sagt:
    Februar 17th, 2009 at 18:56

    Hi Hisky!

    Also WP Ajax Edit Comments ist in der Version 2.2.6.0 aktiviert, sowie Lightbox 2 Plugin 0.7

    Grüße
    steffen

  12. 37. Nils sagt:
    Februar 17th, 2009 at 19:53

    Hab das standard theme mal ausprobiert nichs.
    Hier mal meine comment.php vom Theme was ich benutzten möchte.

    http://www.nils-snake.de/any/comments.rar

    Vielen dank dir erstmals

  13. 38. Nils sagt:
    Februar 17th, 2009 at 20:14

    (ich spamm hier alles voll :| )
    Also Cache gelöscht aber das aktivieren des standard theme erzielt keine Verbesserung.

  14. 39. Hisky sagt:
    Februar 17th, 2009 at 20:26

    Fassen wir zusammen:
    In WordPress 2.6 läuft es mit meinen Dateien und Anpassungen.
    In WordPress 2.7 nur noch im Admin.
    Liegt nicht am Theme.

    ==>> Schätze die WP-Ajax.js hat nen Treffen etc. pp.

    1. Bitte diese WP Ajax downloaden
    2. Die WP Ajax auf Eurem Server in WP-Ajax2.7 umbenennen als Sicherung
    (Ordner wp-includes/js/ )
    3. Die anderen WP Ajax reinladen.

    Sollte gehen.

  15. 40. Nils sagt:
    Februar 17th, 2009 at 20:29

    Hab keine Datei die wp-ajax.js heißt, nur eine wp-ajax-response.js und noch eine wp-list.js diese wird denke ich mal nichs mit dem porlbem zu tun haben

  16. 41. Hisky sagt:
    Februar 17th, 2009 at 20:34

    Komisch. Die muss da sein. Dann bitte reinladen. Kannst ja nix kaputt machen :)

  17. 42. Nils sagt:
    Februar 17th, 2009 at 20:35

    So ist drinne mal gucken was passiert ist :D

    Hmm nütschz bin der Meinung das es an der comments.php liegt was wiederum auch nicht sein kann weile bei den anderen Themes ist genau das gleiche Problem…kurz irgend was anderes machen um mal runter zu kommen ^^

  18. 43. Hisky sagt:
    Februar 17th, 2009 at 20:52

    Die comments.php ist eh zerschossen bzw. das Live Preview Plugin geht nicht. Und der Zähler, wieviele Kommentare es gab geht nicht.

    Müsste dann im Standardtheme aber gehen….außer da wurde auch gebastelt ;)

  19. 44. Nils sagt:
    Februar 17th, 2009 at 21:00

    Hab mal grad Livepreview runtergehauen sehe das Überleben auf meinem Blog für dieses Plugin eh nicht.

    Ich prbiers nochmal mitm Standartheme

  20. 45. Hisky sagt:
    Februar 17th, 2009 at 21:11

    Okay. Mit dem Theme geht es jetzt :)

    Ich finde LivePreview total sinnlos. Deshalb hab ich es im Blog eingebaut :D (ist nur ein Gimmick…okay)

  21. 46. Nils sagt:
    Februar 17th, 2009 at 21:12

    Also liegt es am Theme oder ? und warum schriebst du “Ihr Beitrag wartet auf Freischaltung. ===>>> das könnte es sein. Kannst Du das irgendwo deaktivieren?” das, ich blick gar net mehr durch :o

  22. 47. Hisky sagt:
    Februar 17th, 2009 at 21:15

    Ja. Schätze es liegt an der zerballerten comments.php.
    Lade Dir das Theme nochmal runter und schiebe die comments.php rein. (benenne die alte comments.php vorher auf dem Server um – als Sicherung)

    Wegen dem “Freischaltung” – ich dachte es liegt vielleicht auch daran.

  23. 48. Nils sagt:
    Februar 17th, 2009 at 21:19

    Done.

    und nix gebracht…hmm langsam wird schwierig ich werde mal die comments.php datein vom standard theme und vom aktuellen vegleichen

  24. 49. Nils sagt:
    Februar 17th, 2009 at 21:36

    Also bei mir geht das nicht..

    Wenn ich mich auslogge auf meine Seite gehe (Frontent) irgend was wild in die Eingabe Felder des Kommentars kloppe es bestätige, kann ich nix per ajax editieren

  25. 50. Hisky sagt:
    Februar 17th, 2009 at 21:55

    Leere Mal Deinen Browsercache.
    Bei mir geht es 1a. :thumb:

Seiten: « 1 [2] 3 4 » Zeige alle

Hinterlasse einen Kommentar