Daten via AJAX werden zu spät geladen

[Patrick]

Hi,

ich brauch mal wieder eure Hilfe.
Ich habe folgendes Konstrukt:

var newDiv = document.createElement("div");
loadData(winCounter);
newDiv.innerHTML = response;
document.getElementById("content").appendChild(newDiv);

mein loadData wird hier aufgerufen:

function loadData(c)
{
 if (xmlHttp) {
     xmlHttp.open('GET', 'getdata.php', true);
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4) {
             response = xmlHttp.responseText;
         }
     };
     xmlHttp.send(null);
 }
}

die obere Funktion wird durch klick aufgerufen und kann mehrfach ausgeführt werden.
Mein Problem ist nun, dass beim 1. Klick nichts passiert, beim 2. Klick allerdings die Daten des 1. Klicks angezeigt werden.
Somit bin ich immer 1 Klick hinterher.
Hab ich vielleicht irgendwo was übersehen?

Danke
Patrick

[steckl]

Hi,

var newDiv = document.createElement("div");
loadData(winCounter);
newDiv.innerHTML = response;
document.getElementById("content").appendChild(newDiv);

mein loadData wird hier aufgerufen:

function loadData(c)
{
if (xmlHttp) {
     xmlHttp.open('GET', 'getdata.php', true);
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4) {
             response = xmlHttp.responseText;
         }
     };
     xmlHttp.send(null);
}
}

die obere Funktion wird durch klick aufgerufen und kann mehrfach ausgeführt werden.
Mein Problem ist nun, dass beim 1. Klick nichts passiert, beim 2. Klick allerdings die Daten des 1. Klicks angezeigt werden.
Somit bin ich immer 1 Klick hinterher.
Hab ich vielleicht irgendwo was übersehen?

Bei AJAX wird der Request normalerweise asynchron abgesetzt, das heisst, dass mit der weiteren Abarbeitung des Scripts nicht gewartet wird, bis der Request fertig ist.
Wenn du den dritten Parameter von xmlHttp.open() auf false setzt wird der Request nichtmehr asynchron abgesetzt und es wird gewartet, bis er fertig ist.
Eine bessere Moeglichkeit waere es, den Response-Text in der Funktion, die bei onreadystatechange aufgerufen wird, in das DIV zu schreiben (da wo jetzt steht "response = xmlHttp.responseText;").

mfG,
steckl

[Patrick]

Hi steckl,

auch dir ein Dankeschön ;-)

Bye
Patrick

[Micha]

Hallo Patrick,

es sieht für mich so aus, als versuchtst Du schon vor dem eigentlichen Vorhandensein der Daten auf diese zu zugreifen

loadData(winCounter);

hier rufst Du die Funktion auf. Wenn die Funktion durchlaufen ist, heißt das nicht, dass Du auch ein Ergebnis hast. Es wird eine Anfrage gestellt und Du wartest diese nicht ab, sondern

newDiv.innerHTML = response;

gibts hier die (noch) leere Variabel "response" (bzw. dessen Inhalt) an Dein DIV.

In Deiner Funktion ist die Antwort des Servers aber erst wirklich da, wenn Du den Status 4 erreicht hast.

if (xmlHttp.readyState == 4)
             response = xmlHttp.responseText;

Mein Problem ist nun, dass beim 1. Klick nichts passiert,

Korrekt, Du wartest die Anwort nicht ab

beim 2. Klick allerdings die Daten des 1. Klicks angezeigt werden.

Ja, da sind die Daten des ersten Klicks dann geladen. Beim zweiten Klick hast Du aber wieder das Problem, das Du nicht wartest. Somit wird erst nach Deiner Zuweisung der Inhalt von response überschrieben.

Hab ich vielleicht irgendwo was übersehen?

Möglicherweise, ja ;-)

Du könntest in der Funktion den Text zuweisen:

  
 if (xmlHttp.readyState == 4)  
    newDiv.innerHTML = xmlHttp.responseText;  

Mit freundlichem Gruß
Micha

[Patrick]

Hi Micha,

danke für deine Hilfe.
Ich mache es jetzt so, dass ich nur loadData() aufrufe und mein komplettes div in der Rückgabe der xmlHttp-Response erstelle.

Danke
Patrick