AJAX führt ein Eigenleben in Bezug auf DIV´S

[1uck3r]

Hallo und einen sonnigen guten Morgen,

hoffe das wetter bei euch ist genau so geil wie hier an der Nordsee

Nun mal zu meinem Problem. Ich habe mit Mootools 1.2

einen AjaxRequest einen ganz normalen der eine PHP seite lädt und dessen JS code auch ausführt funktioniert alles nur irgendwie scheint des ResponseText immer automatisch im höchsten div zu landen wobei ich aber explizit ein div für das ergebnis angegeben habe.

Lädt eine PHP seite mit ajax funktioniert auch soweit nur das "destination" der Div Container für das ergebnis nicht eingehalten wird von AJAX

function scmsLoadPage(session, method, file, destination)
{
	var load = new Request({
        method: method,
        url: "include/ajax/ajax.inc.php?PHPSESSID="+session+"&file=../pages/"+file+".inc.php",
		evalScripts:true
    });
	
	load.addEvent('request', function(response, xml) {
		$(destination).set('html', '<div id="scms-ajax-loading-status" style="margin-top:30%;">Bitte warten...<br><img src="http://www.tutorials.de/forum/images/scms-ajax-loading-big.gif"></div>');
	});
	
	load.addEvent('success', function(response, xml) {
		$(destination).set('html', '<div id="innerBody"></div>'+response);
	});
	
	load.send();
}

aktueller inhalt der aufgerufenen php datei

Wie man sieht will ich einen text in den innerBody container schreiben der beim response mit in den gewünschten div container geschrieben wird. Funktioniert auch alles das echo "TEST"; landet dann aber auch im innerBody was nicht sein soll ich habe ja ein anderes als ziel für die abfrage angegeben. Das ganze habe ich mit hilfe von FireBug festgestellt woran könnte das liegen ? Und wieso kann man keinen text mit hilfe des JS Codes in der PHP Datei dessen response Ajax im selben div ablegt eintragen.?

echo "<script type=\"text/javascript\">
$(\"innerBody\").appendText(\"SSSTEST\");
</script>";
	
echo "TEST";

Ruft alles auf

<a onclick='scmsLoadPage("PHPSESSIONID", "get", "test", "zielDiv");'>TEST</a>

Beispiel der Div container
<div id="zielDiv"> <!-- Gewünschtest Ziel laut aufruf
HIER SOLLTE DER TEXT "TEST" SEIN
<div id="innerBody"> <!-- Tatsächtliches Ziel von AJAX
ABER ER IST HIER UND "SSSTEST" WIRD NICHT ANGEZEIGT
</div>

 

[Sven Mintel]

Moin,

der Skriptcode im Response wird ausgewertet, bevor die Callback-Funktion für den success-Event aufgerufen wird.

Ergebnis:
Der Skriptcode im Response soll auf $(\"innerBody\") zugreifen, dieses existiert jedoch zu diesem Zeitpunkt nicht, weil du es zuvor in der Callback-Funktion für request entfernt hast.

 

[1uck3r]

Hmm entweder versteh ich dich gerade falsch oder du mich wenn du mal guckst existiert der innerBody neben dem response.

Aber wenns daran liegt wie du es hier beschreibst was ich auch glaube wird es doch bestimmt eine lösung geben den JS code in irgend einer weise erst dann zu starten wenn alle Objekte(Div Container) vorhanden sind

mfg 1uck3r

 

[Sven Mintel]

Hmm entweder versteh ich dich gerade falsch oder du mich wenn du mal guckst existiert der innerBody neben dem response.

So ist der chronologische Ablauf:

• Du startest den Request

load.send();

• die Callback-Funktion für request wird abgearbeitet:

$(destination).set('html', '<div id="scms-ajax-loading-status" style="margin-top:30%;">Bitte warten...<br><img src="http://www.tutorials.de/forum/images/scms-ajax-loading-big.gif"></div>');

Hier wird das div#innerBody entfernt, weil der Inhalt von zielDiv überschrieben wird

• der Request ist fertig, die Antwort des Servers ist verfügbar und eventuelle Skript-Anweisungen darin werden ausgewertet, so diese:

$(\"innerBody\").appendText(\"SSSTEST\");

....$('innerBody') existiert zu diesem Zeitpunkt nicht, du hast es ja in Schritt 2 entfernt.

• die Callback-Funktion für success

$(destination).set('html', '<div id="innerBody"></div>'+response);

Erst hier fügst du das div#innerBody wieder ein...zu spät.
Der Skriptcode in response wurde bereits in Schritt 3 ausgewertet.



Anders geht es natürlich, anstatt das neue #innerBody erst im Callback zu erzeugen, füge es bereits in dem Skript-Block, den der Server zurückgibt, ein.

Oder:Wenn der Server so antworten würde:

<div id="innerBody">SSSTEST</div>TEST

...könntest du dir die Fummelei auch gleich ersparen.

Im Callback für success brauchst du dann nur dies:

$(destination).set('html', response);