✔ $.ajax an ein div senden

Wessy

Wessy

Erfahrenes Mitglied
Hallo beisammen,

ich komme gerade bei Ajax nicht weiter. Also ich hab folgendes vor:

Ich habe div1 und div2 (jeweils mit einer id). Nun möchte ich mit
Code: 
$.ajax({ type: "GET", url: href, dataType: "html", global: true});
meine Anfrage auf den Weg schicken und die Event-Handler der DIV's bzw.
Code: 
$("#meine_id_1").ajaxSuccess(......)
sollen den Inhalt weiter verarbeiten. Dass man über $.ajax(....) auch eine Callback-Funktion verwenden kann ist mir klar, aber ich möchte halt die Event-Handler der DIV's benutzen und eigentlich fehlt mir für mein $.ajax(...) nur noch ein...... ja target! Also welche ID sich angesprochen fühlen soll (bitte nehmt nicht jedes Wort auf die Goldwaage)! :)

Vorteil bei der Sache wäre halt dass ich die ajaxSuccess-Handler für jedes DIV individuell gestalten kann.
 
Hi,

ich bin mir nicht sicher, ob ich dich richtig verstanden habe.

Du willst jeweils für ein DIV nach erfolgreichem Request den ajaxSuccess-Event aufrufen.

Als Lösung könntest du die global-Eigenschaft des ajax-Objekts wieder auf false setzen. In einer neuen Eigenschaft wird die ID des DIVs gesetzt. Darüber kann in der complete-Funktion mittels der trigger-Methode der gewünschte Event ausgelöst werden.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function testAjax(strID){
  $.ajax({
    type: "GET",
    url: "xmlhttp_request_dummy.php",
    dataType: "html",
    global: false,
    div_id: strID,
    complete: function(request, txtStatus){
      // Event auslösen und fehlende Parameter übergeben
      $("#"+this.div_id).trigger('ajaxSuccess', [request, this]);
    }
  });
}

$(document).ready(function(){
 $("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<p>Request erfolgreich! " + request.responseText + "</p>");
 });
});
//-->
</script>
</head>
<body>
<button onclick="testAjax('msg');">testAjax</button>
<div id="msg"></div>
</body>
</html>

VIelleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Hallo Quaese,

vielen Dank erst mal für deine super Antwort. Hast mich genau richtig verstanden. Und dein Beispiel funktioniert auch wunderbar. Nur gibt es denn wirklich keine Möglichkeit das
Code: 
global: true
zu belassen und die Ajax-eigenen Event-Handler zu verwenden? Denn sonst könnte ich ja auch anstelle der Trigger einfach eigene Funktionen schreiben und die entsprechend aufrufen

Irgendwie z.B. ein
Code: 
$("#divcontent").ajax({ type: "GET", url: href, dataType: "html"...
z.B.? Mich interessieren halt die Ajax-eigenen Eventhandler da man mehr oder weniger darüber das Verhalten für ankommende Ajax-Daten 'einstellt' (z.B. für das eine DIV die Daten langsam einblenden, für das andere aufklappend,...) und über eine einzige Funktion alle Ajax-Request's abfeuert.

Zusätzlich könnte man aus dem einen DIV (bzw. der Datei dort hinter) ohne viel Aufwand einen weiteren Request an andere DIV's senden ohne sich einen großen Kopf um die Handler zu machen.

Hmmm. Fällt dir wohl noch etwas dazu ein?
 
Oh man, Sekunde. Ich glaub ich bin grad selbst drauf gekommen...

Ok, also wenn ich es nun richtig verstehe werden mit z.B.
Code: 
$("#divcontent1").ajaxSuccess(...)
$("#divcontent2").ajaxSuccess(...)
zwei Callback-Funktionen definiert die automatisch 'beide' auf ein erfolgreiches Ergebnis von $.ajax(...) anspringen. Ok Quaese, vielleicht werde ich es doch so machen wie du es bereits vorgeschlagen hast.

Vielen Dank noch mal. Hürde genommen.
 
Zuletzt bearbeitet:
Hi,

genauso ist es - der ajaxSuccess-Event feuert, wenn ein Ajax-Request erfolgreich abgeschlossen wurde. Allerdings nur, wenn er global definiert wurde. Dann feuern allerdings die Events aller Elemente, die damit ausgezeichnet sind. Deshalb der Workaround von mir, um gezielt individuelle Elemente ansprechen zu können.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück