[JS] Erst Ajax-Rückgabe abwarten, dann fortfahren

[webdepp]

Moin zusammen !

Folgender Javascript Code, der mit Klick auf den Submitbutton ausgeführt wird, funktioniert nicht so ganz.

Die Funktion POSTdata() ist meine Ajax-Funktion, die den Wert des Feldes checkStatus ändert. Allerdings wird mit dem ersten Klick (und richtigem Code) der else{}-Teil ausgeführt, dann der Wert von CheckStatus geändert, und erst mit dem 2. Submit-Klick wird der if()-Teil ausgeführt. Der Rückgabewert wird in der DOM aber nach dem 1. Mal auf jeden Fall richtig gesetzt.

Sprich, anscheinend dauert der Abruf der Daten zu lange, und während dessen fährt das Script schonmal fort.

Gibt es eine Möglichkeit, wie ich JS beibringen kann, erst die POSTdata-Rückgabe abzuwarten, und dann fortzufahren ?

Ein einfaches if(POSTdata() != false) hat leider keine Veränderung gebracht.

<script>


	function checkCode(value, field) {

		POSTdata(null, 'operator=check_promocode&code='+value, document.getElementById(field),'/php/operator.php')


			if(document.getElementById('checkStatus').value == 'true'){


				document.getElementById('codeDiv').style.visibility = 'hidden';

				document.getElementById('wktbl').style.visibility = 'visible';

			}else{

				document.getElementById('codeDiv').style.backgroundColor = "#FF9933";

			}


	}

</script>

<div id="codeDiv">

							 <input type="hidden" name="checkStatus" id="checkStatus" value="std">

							 <input type="text" name="code" id="promocode" value="">

                             <input  type="button" onclick="checkCode(document.getElementById('promocode').value,'checkStatus');" value="Absenden" />

</div>	

Danke schonmal für jeden Tip,

Gruß, Tobi

[Aiun]

Antwort: nein

Du hast eine denkfehler,

die funktion postdata ist immer Synchron, aber was auch immer du darin tust ist asynchron (ajax), somit wird die funktion beendet sobald der ajax-Request abgesetzt ist.

Du musst den Ajax Teil ändern das er Synchron abgeschickt wird.

[geloescht_JesterDay]

Gibt es eine Möglichkeit, wie ich JS beibringen kann, erst die POSTdata-Rückgabe abzuwarten, und dann fortzufahren ?

Ja, wie eben geschrieben wurde gibt es die Möglichkeit den HTTPRequest-aufruf auch synchron zu machen. Ich spreche absichtlich nicht von AJAX, weil AJAX ja allein vom Namen her schon sagt, dass es asynchron ist.

Wenn du sowas synchron per HTTPRequest ausführen willst, dann mach es lieber auf die alte Art, über einen normalen Form.Post, denn nichts anderes wäre deins. Ok, es würde ncihtmehr die gesamte Seite vom Server abgerufen etc. Aber einen wirklichen Vorteil hättest du damit wohl kaum.

Was du wohl eher verwenden solltest ist die asynchrone Methode, die ja auch standardmäßig genutzt wird. Dazu kannst du deinem AJAX-Aufruf (jenach dem was du verwendest) eine Callback-Methode mitgeben, die bei Erfolg oder bei Misserfolg deines Aufrufs ausgeführt wird. In dieser Funktion kannst du dann das tun, was nach der abfrage getan werden soll.

Der Witz an AJAX ist ja, dass es asynchron ist.

Also falls du nicht ganz besondere Gründe hast es doch synchron machen zu müssen, solltest du dich nochmal mit dem AJAX-Call beschäftigen.

[webdepp]

Antwort: nein

die funktion postdata ist immer Synchron, aber was auch immer du darin tust ist asynchron (ajax), somit wird die funktion beendet sobald der ajax-Request abgesetzt ist.

Okay, klingt logisch

Dazu kannst du deinem AJAX-Aufruf (jenach dem was du verwendest) eine Callback-Methode mitgeben, die bei Erfolg oder bei Misserfolg deines Aufrufs ausgeführt wird.

Sorry, ich bin heute glaube ich ein wenig betriebsblind. Ich habe nach beiden Lösungsmöglichkeiten gegooglet aber:

Synchron: Zwar habe ich Seiten und Artikel gefunden, aber leider keinen direkten Vorher-Nachher-Vergleich. Damit weiß ich jetzt, dass ich onreadystatechange nicht verwenden darf. Aber was irgendwie finde ich keine Alternativfunktion. Hat mir einer von euch beiden ielleicht kurz einen Link zur Hand ?

Callback-Funktion: Irgendwie ist mir das Prinzip nicht klar. Zum leichteren Verständnis mal die POSTdata-Funktion

function POSTdata(fobj, post_str, destobj, url) {


	if (typeof(url)=="undefined") {

		url = "/verwaltung/operator.php";

	}


	var http_request = false;

	//http_request_destobj = destobj;


	if (window.XMLHttpRequest) { // Mozilla, Safari,...

		http_request = new XMLHttpRequest();

		if (http_request.overrideMimeType) {

			//http_request.overrideMimeType('text/xml');

			http_request.overrideMimeType('text/html');

		}

	} else if (window.ActiveXObject) { // IE

		try {

			http_request = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {

			try {

				http_request = new ActiveXObject("Microsoft.XMLHTTP");

			} catch (e) {}

		}

	}

	if (!http_request) {

		alert('Cannot create XMLHTTP instance');

		return false;

	} else {


		if (fobj!=null)

			post_str += '&' + getFormValues(fobj);


		http_request.onreadystatechange = function () {

			if (http_request.readyState == 2) {

				destobj.innerHTML = 'loading ...';

			} else if (http_request.readyState == 4) {

				if (http_request.status == 200) {

					// alert(http_request.responseText);

					result = http_request.responseText;


					if (destobj.tagName == 'TEXTAREA' || destobj.tagName == 'INPUT'){

						destobj.value = result;

					}else

						destobj.innerHTML = result;


					execJS(destobj);            

				} else {

					alert('There was a problem with the request.');

				}

			}

		}


		http_request.open('POST', url, true);

		http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8"); // 

		http_request.setRequestHeader("Content-length", post_str.length);

		http_request.setRequestHeader("Connection", "close");

		http_request.send(post_str);

	}

}

Mein Problem ist, dass ich ja eine Funktion nicht einfach als Parameter mit übergeben kanne, oder? Und wenn doch, wäre die doch dann eine Variable, wie also ansprechen, wenn die dieser dann wieder einen Parameter mitgeben will...

Sorry, das macht mich wirklich konfus, als Javascript Noob Erbarmt euch doch bitte und bringt mich auf die richtige Spur

Vielen Dank,

Der Depp

[Aiun]

spar dir viel arbeit und nimm mootools, jquery oder prototype, das sind JS Frameworks mit sehr guter dokumentation und fast keinem setup-Aufwand.

In JS sind funktionen nichts anderes als der inhalt von Variablen, somit kannst du funktionen als parameter übergeben und darin dann unter dem namen des parameters mit () aufrufen.

[geloescht_JesterDay]

script.aculo.us - web 2.0 javascript wäre noch als Framework anzufügen. Auf prototype aufbauend, aber halt dann vor allem für optischen Schnickschnack

Da (also bei prototype eigentlich) kannst du das synchron/asynchron über einen Parameter steuern.

[webdepp]

In JS sind funktionen nichts anderes als der inhalt von Variablen, somit kannst du funktionen als parameter übergeben und darin dann unter dem namen des parameters mit () aufrufen.

Ahhh. Danke

Jaja, Framework... Von mir aus gerne. Nur mein Chef mag Open Source, folglich darf ich keins verwenden... Bescheuert, aber iss so ^^

Aber danke auf jeden Fall mal für die Hilfe, bringt mich schon mal kurzfristig weiter.

[Aiun]

mootools steht unter MIT Lizenz soweit ich weis, ich würde das schon als opensource bezeichnen

prototype /scriptacoulus ist evtl. BSD, musst du nachschauen.

ich verwende großteils mootools

[webdepp]

Ich meinte selbstverständlich, er mag KEIN Open Source, sorry

[geloescht_JesterDay]

Also script.aculo.us ist kein OpenSource in dem Sinne (also im Sinne von GPL o.ä.):

Copyright© 2005-2008 Thomas Fuchs (script.aculo.us - web 2.0 javascript, mir.aculo.us)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so...

Und da es auf prototype aufbaut, wird das auch keine andere Lizenz haben.