ubuntuusers.de

Problem mit Setzen von innerHTML mit Jquery

Status: Gelöst | Ubuntu-Version: Ubuntu 10.10 (Maverick Meerkat)
Antworten |

Arubeto

Anmeldungsdatum:
4. Dezember 2007

Beiträge: 384

Hallo,

ich versuche gerade, erste Schritte in Jquery zu machen. Dabei habe ich ein Problem: ich will folgendermaßen Ajax-mäßig Inhalt für ein div mit id "content" nachladen:

function loadXMLDocToContent(url){
	var new_content = $.get(url);
	alert("New content from "+url+": "+new_content);
	if(new_content!=null && new_content!=undefined){
		$("#content").html(new_content.responseText);
	}
}

Das klappt auch wunderbar. Wenn ich jedoch die "alert"-Zeile entferne, geht nichts mehr, der aktuelle innerHTML von "content" wird gelöscht, jedoch kein neuer hinzugefügt. Woran liegt das?

raziel

Avatar von raziel

Anmeldungsdatum:
3. Mai 2005

Beiträge: 119

Wohnort: /dev/null

Eigentlich duerfte das gar nicht funktionieren 😕 Der Witz an AJAX ist die asynchronitaet, d.h. du rufst $.get() auf und das JavaScript laeuft weiter. Problem hier: Wie kriegst du mit, wenn der Server eine Antwort auf dein $.get() schickt? Ueber eine Callbackfunktion:

function loadXMLDocToContent(url){
  $.get(url, function(data){
    $("#content").html(data);
  });
}

Sobald $.get() die Daten in url geladen hat wird die Funktion, die als zweiter Parameter uebergeben wird, aufgerufen und die Daten in data uebergeben.

Gruss, raziel

Arubeto

(Themenstarter)

Anmeldungsdatum:
4. Dezember 2007

Beiträge: 384

Danke für die Antwort. Was muss/kann die Callback-Funktion, die ich als zweiten Parameter übergebe, mit den Daten machen? Kann ich dann in dieser Callback-Funktion .responseText aufrufen, um aus den Daten (die ja ein httpRequest-Object sind, oder?) den Text aus der geladenen Datei zu holen? Sorry, falls das eine blöde Frage ist.

dominator

Avatar von dominator

Anmeldungsdatum:
18. März 2008

Beiträge: 90

Wohnort: Meistens im Bierparadies Oberfranken

raziel

Avatar von raziel

Anmeldungsdatum:
3. Mai 2005

Beiträge: 119

Wohnort: /dev/null

Mit der Callback-Funktion kannst du den Inhalt abrufen, den Status abrufen und das XMLHttpRequest-Objekt abrufen. Eine Callback-Funktion kann so aussehen:

function(data, status, xhr) {
  alert('Der Inhalt (entspricht xhr.responseText): ' + data);
  alert('Der Status (entspricht xhr.status in Textform): ' + status);
  alert('Das XMLHttpRequest-Objekt selbst: ' + xhr);
}

Mit dem dritten Parameter hast du Zugriff auf xhr.responseText, was aber im Normalfall den Daten in data entspricht 😉

Es lohnt sich btw auch ein Blick in die jQuery-Doku: http://api.jquery.com/jQuery.get/

Gruss, raziel

Arubeto

(Themenstarter)

Anmeldungsdatum:
4. Dezember 2007

Beiträge: 384

@dominator: danke, diese Funktion habe ich gesucht.

@raziel: danke für die Erklärung, ich hatte mir die Dokumentation schon angeschaut, hatte die Erklärung aber noch nicht korrekt verstanden. Ich dachte auch, dass "data" die Daten bzw. der eigentliche Text aus der von mir geladenen Datei seien. Zum Testen habe ich dann eine "alert("Daten: "+data);" eingebaut, was mir dann aber eine Box mit "Daten: [object xmlhttpRequest]" geliefert hatte. Deswegen hatte ich .responseText manuell abgefragt.

Danke!

Arubeto

(Themenstarter)

Anmeldungsdatum:
4. Dezember 2007

Beiträge: 384

raziel schrieb:

Eigentlich duerfte das gar nicht funktionieren 😕 Der Witz an AJAX ist die asynchronitaet, d.h. du rufst $.get() auf und das JavaScript laeuft weiter. Problem hier: Wie kriegst du mit, wenn der Server eine Antwort auf dein $.get() schickt? Ueber eine Callbackfunktion:

function loadXMLDocToContent(url){
  $.get(url, function(data){
    $("#content").html(data);
  });
}

Sobald $.get() die Daten in url geladen hat wird die Funktion, die als zweiter Parameter uebergeben wird, aufgerufen und die Daten in data uebergeben.

Gruss, raziel

Ja, jetzt habe ich auch meinen Fehler begriffen: dadurch, dass AJAX asynchron ist, muss ich natürlich warten, bis alle Daten da sind. Das habe ich nicht gemacht, sondern direkt "data" in Content reingepackt, das war der Fehler, oder?

Und durch das Umlagern der "data"-in-"content"-Zuordnung in die Callback-Funktion wird tatsächlich gewartet, bis die Daten komplett geladen wurden, bevor die "data" in "content.innerHTML" geschrieben wird, richtig?

raziel

Avatar von raziel

Anmeldungsdatum:
3. Mai 2005

Beiträge: 119

Wohnort: /dev/null

Genau so ist es. Ich verstehe jetzt auch, wieso dein urspruengliches Beispiel mit dem alert funktionierte:

jQuery gibt scheinbar beim Aufruf von $.get() eine Referenz auf das XMLHttpRequest-Objekt zurueck. Durch das alert hatte der Server genuegend Zeit zu antworten und data.responseText zu fuellen und deshalb wurde der Text auch korrekt angezeigt. Durch das weglassen von alert war die Zeit fuer den Server zu knapp. Aber mit der Callback-Funktion wird jetzt auf jeden Fall so lange gewartet, bis die Daten geladen sind.

Gruss, raziel

Antworten |