JQuery - Elemente in Ajax-Bereichen automatisch initialisieren

Submitted by Julian Pustkuchen on 25. March 2009 - 0:05

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:

<script type="text/javascript">
$(document).ready(function(){
globalInit();
observeAjax();
});
function observeAjax(){
$(document).ajaxSuccess(function(evt, request, settings){
globalInit(evt.target)
});
}
function globalInit(jquerySelectorOrObject){
if(jquerySelectorOrObject == null){
jquerySelectorOrObject = "body";
}
//Beispiele für Initialisierungen:
$(jquerySelectorOrObject).find("a.testlink").each(function({
$(this).attr("href",'hatGeklappt.html');
});
$(jquerySelectorOrObject).find("a.testlink").each(function(){
$(this).append('!');
});
}
function executeAjax(){
$("div.ajaxContainer").each(function(){
$(this).load("inhalt.html",null,function(){globalInit(this);})
});
}
</script>
... HTML ...

Einordnung:

Comments

Hilfe??

Submitted by Gast on 12. August 2010 - 15:48.

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.

Submitted by webksde on 12. August 2010 - 16:22.

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

Submitted by Gast (not verified) on 18. June 2011 - 10:15.

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

Submitted by webksde on 18. June 2011 - 10:42.

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.

Post new comment

Your name: *

E-mail: *

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.

Homepage:

Subject:

Comment: *

Web page addresses and e-mail addresses turn into links automatically.
Internal paths in single or double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or path. Paths to files in single or double quotes, written as "files:somefile.ext", for example, are replaced with the appropriate URL that can be used to download the file.
Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><blockquote>
Lines and paragraphs break automatically.
Pairs of<blockquote> tags will be styled as a block that indicates a quotation.
You can enable syntax highlighting of source code with the following tags: <c>, <cpp>, <css>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <smarty>, <xml>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
Textual smileys will be replaced with graphical ones.
Each email address will be obfuscated in a human readable fashion or (if JavaScript is enabled) replaced with a spamproof clickable link.

More information about formatting options

Notify me when new comments are posted

Word verification: * Type the characters you see in this picture.

(verify using audio)

Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

Julian Pustkuchen ist passionierter Software- & Webentwickler mit den Schwerpunkten Softwaredesign, Objektorientierung, Ablaufoptimierung und Usability bei webks. Ein weiterer Schwerpunkt ist die Entwicklung im CMS Drupal.
Er besitzt einen Abschluss als B.Sc. Wirtschaftsinformatik (dual) und studiert derzeit für seinen Abschluss als Master of Science Wirtschaftsinformatik.