JQuery - Elemente in Ajax-Bereichen automatisch initialisieren

Häufig tritt beim Einsatz von Ajax in JQuery das Problem auf, dass darin enthaltene Elemente nicht wieder korrekt manipuliert oder getriggert werden.

Da mir die Änderung von Hand allerdings in größeren Projekten zu aufwändig war und es sich ohnehin um eine "Standard-Problematik" handelt, habe ich mir vorgenommen diese sauber zu lösen.

Im folgenden Beitrag findet ihr also eine Lösung um einheitlich innerhalb von Bereichen in die Ajax geladen wurde, Manipulationen und Initialisierungen vorzunemen.

Dies funktioniert beispielsweise für die Thickbox und andere JQuery-Plugins sehr gut, ist aber natürlich auch für eigene Init-Werte sehr praktisch.

Live-Events stellen leider derzeit noch keine Alternative da, weil viele Plugins diese nicht nutzen und sie nicht für alle Events angeboten werden.

Eine für die Thickbox vorgeschlagene Lösung findet man hier:
http://www.djcnet.co.uk/jquery-thickbox-on-ajax-generated-pages.html
Allerdings werden hier auch alle anderen onclick-Events der thickbox-Elemente gelöscht, was ich für unsauber halte.
Außerdem ist es keine allgemeine Lösung wie die, welche ich angestrebt habe.

Eine ähnliche Lösung wie meine habe ich übrigens im Netz noch nirgends gefunden. Es würde mich aber wundern, wenn ich der erste wäre, den dieses Problem nervt. Für Vorschläge bin ich also jederzeit offen.

Hier meine Lösung, die ihr gerne verwenden dürft, ein kleiner Kommentar wäre dann aber nett:

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.     globalInit();
  4.     observeAjax();
  5. });
  6.  
  7. function observeAjax(){
  8.   $(document).ajaxSuccess(function(evt, request, settings){
  9.         globalInit(evt.target)
  10.  });
  11. }
  12.  
  13. function globalInit(jquerySelectorOrObject){
  14.     if(jquerySelectorOrObject == null){
  15.         jquerySelectorOrObject = "body";
  16.     }
  17.     //Beispiele für Initialisierungen:
  18.     $(jquerySelectorOrObject).find("a.testlink").each(function({
  19.       $(this).attr("href",'hatGeklappt.html');
  20.     });  
  21.     $(jquerySelectorOrObject).find("a.testlink").each(function(){
  22.       $(this).append('!');
  23.     });  
  24. }
  25.  
  26. function executeAjax(){
  27.     $("div.ajaxContainer").each(function(){
  28.         $(this).load("inhalt.html",null,function(){globalInit(this);})
  29.     });    
  30. }
  31. </script>
  32.  
  33. ... HTML ...

Kommentare

Hilfe??

Hey,

ich denke, das es genau das ist, was ich suche. Habe folgendes Problem: Möchte eine art Voting durchführen, das nach klick aktualisiert wird, aber auch alle paar sekunden. Habe denn mein Script zum voting über Ajax eingebunden, und schon konnte ich nicht mehr voten. Ist dein script für so eine art problem gedacht? wenn ja, in welche datei muss ich es einsetzen!

Hi, ja grob geht es darum.

Hi,

ja grob geht es darum. Ist aber keine "Plug & Play"-Lösung.

Du musst dein Voting-Script noch einmal für den per Ajax geladenen Bereich initialisieren. Hast du den JS-Code für das Voting selbst geschrieben?

Danke und Frage

Hallo,

danke für den Lösungsansatz.
Ich denke, ich werde es damit in meinem aktuellen Projekt versuchen. Es handelt sich um einen internen Adminbereich. Dort werden einzelne Bereiche per Ajax nachgeladen und aktualisiert. In diesen Bereichen sollten dann wieder der tinyMCE-Editor und Jquery ui Elemente (dialog() und button()) initialisiert werden.
Zu meiner Frage: Wird in Deinem Beispiel globalInit() nicht doppelt ausgelöst? Einmal über das callback in executeAjax ... load() und wieder über observeAjax()?

Liebe Grüße

Hallo, nein aus meiner Sicht

Hallo,

nein aus meiner Sicht sollte das nicht so sein, da das observeAjax ja die Methode nur ausführt, nachdem ein Ajax Call erfolgt ist.

Übrigens kann an vielen Stellen auch via LiveEvents Abhilfe geschaffen werden.

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Weitere Informationen über Formatierungsoptionen