Sympathisant: JQuery, Ajax-PHP, Callback-Funktionen

Hai,

ich habe ein Problem mit den Callback-Funktionen von JQuery.

Szenario:

  • Ein Formular wird abgesandt
  • vorher wird ein Eventhandler aufgerufen
  • dieser ueberprueft die eingegebenen Werte mittels Ajax-Post-Request an PHP-Funktionen
  • wenn alles OK ist, werden die Daten endgueltig an PHP uebermittelt.
  • wenn nicht, dann erscheint im Formular eine entsprechende Fehlermeldung (fuer jedes Eingabefeld unterschiedlich)

Mein Problem ist nun, dass sich die Ablaeufe auf Grund der Callbacks ueberschneiden (das ist zumindest meine Vermutung, bzw. war das das Ergebnis des Debuggens).

Folgend der Code. Die problematisch Stelle habe ich mit $$$$$$ gekennzeichnet. Denn an dieser Stelle wird auf ein Array zugegriffen, der erst durch die Callback-Funktionen manipuliert wird. Jedoch sollte der Code erst ausgefuehrt werden, wenn die Callback-Funktionen beendet sind.

  
var valids = new Array();  
valids["xkb79"] = false; // ==> INDIKATOR, OB WERT EINES EINGABEFELDES KORREKT GESETZT IST  
  
$(document).ready(function()  
{		  
	// validate input before submitting the form  
	$("form:last").submit(function(event) {  
		  
                // validate each element  
		Validate(); // ==> DER REST DES CODES MUSS WARTEN, BIS DIE FUNKTION  
                            // (INKL. CALLBACKS) ABGESCHLOSSEN SIND...  
  
                // check if a value is not valid  
		for (var valid in valids) {  
  
                        // $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  
                        // ...DENN DIE validate-METHODE VERAENDERR WERTE DES valids-ARRAYS  
                        // AUF DIE AN DIESER STELLE ZUGEGRIFFEN WIRD.  
                        // DERZEITIGER STAND IST DER, DASS DIESER CODE _VOR_ DEM BEENDEN  
                        // DER validate-METHODE AUFGERUFEN WIRD (DA CALLBACKS)  
			if(valids[valid]==false) {  
				// do some stuff  
                                return false;  
			}  
		}		  
		// if everything is OK we pass through  
		$.ajax({  
			// do some stuff  
		});  
		// finish (do not submit the form)  
		return false;  
	});	  
});  
  
  
function Validate()  
{  
        // SENDET PHP-REQUEST, data ENTHAELT ENTWEDER NICHTS (=OK) ODER EINE  
        // FEHLERMELDUNG  
	// email validation	  
	$.post("sources/ajax/registration_customer.php", { key: "email", val: $("#xkb79").val() },  
  
                  // MarkFormField ALS CALLBACK, SIEHE UNTEN  
		  function(data){ MarkFormField("xkb79",data);  
	});  
	  
        // BTW ==> IST ES AN DIESER STELLE NICHT MOEGLICH, DEN CODE AUS DER CALLBACK-FUNKTION EINFACH _DANACH_ AUFRUFE??  
        // DOCH LAUT DOKU LIEFERT MIR $.post() KEINEN WERT ZURUECK (ich brauche ja den Wert aus data)  
	// first name validation  
	$.post("sources/ajax/registration_customer.php", { key: "first_name", val: $("#first_name").val() },  
		  function(data){ MarkFormField("first_name",data);  
	});  
	  
	// and and..  
}  
  
  
  
function MarkFormField(fieldName,errMsg)  
{  
	if(errMsg==null || errMsg.length<=0)  
	{  
                // HIER FINDET DER ZUGRIFF / DIE VERANEDERUNG DES valids-ARRAY STATT.. ALLERDINGS ZU SPAET  
		valids[fieldName] = true;		  
		// do some more stuff  
	}  
	else  
	{  
		valids[fieldName] = false;		  
                // do some stuff  
	}	  
}  

Falls der Code Syntax-Fehler enthalten sollte, dann liegt es daran, dass ich ihn stark gekuerzt habe.
Des weiteren sind die kritischen Stellen/Fragen in Grossbuchstaben geschrieben.

Ein Loesungsansatz waere sicherlich das ganze snychron laufen zu lassen, jedoch soll es hierbei einige Probleme mit dem Browser geben.

Bin fuer jeden Hinweis dankbar.

MfG,
Sympatisant

--
"If the future isn't bright, at least it is colorful"
  1. Hallo,

    Du solltest wirklich keine siebenunddreißig Anfragen an den Server senden, sondern eine geordnete mit allen Formularfeld-Namen und -Werten. Als Übertragungsformat könntest du etwas XML-artiges, JSON oder eine Art CSV verwenden. Der Server liefert dann eine ebenso geordnete Liste zurück (am besten JSON), in der alle Fehler geordnet nach Feld drinstehen. Die kannst du durchlaufen und alle Fehler ins Dokument schreiben.

    Anders wirds sehr, sehr kompliziert, weil du unzählige Callbacks irgendwie verwalten musst. Man könnte so ein Helferscript bauen, mit dem man x-beliebige Callbacks erzeugt, nach deren Ausführung eine weitere Ende-Funktion ausgeführt wird. Davon würde ich dir aber abraten. Mache das ganze lieber mit einer Abfrage und einem Callback, der die Serverantwort verarbeitet und sende, falls alles okay ist, das Formular ab.

    Mathias

    1. Hai Matthias,

      was Du schreibst klingt gut. Und mit der Verwendung von JSON hast Du natuerlich auch recht.
      Das hiesse dann, wenn ich dich richtig verstanden habe, dass ich dann in der Validate Methode die weitere Logik als Callback verwalte.

      Danke fuer eure Antworten!

      MfG,
      Sympatisant

      --
      "If the future isn't bright, at least it is colorful"
      1. Hai,

        habe den Code nun wie besagt umgeschrieben. Jetzt klappt es wunderbar.

          
        $(document).ready(function()  
        {		  
        	// validate input before submitting the form  
        	$("form:last").submit(function(event) {  
          
        		// deactivate submit button  
        		$("#frm_submit").attr("disabled","disabled");  
        				  
        		var str = $(this).serialize(); // form parameters  
        		  
        		$.post("sources/ajax/registration_customer.php",   str ,  
        				  function(json) {  
        						var sthWrong = false;  
        						$.each (	  
        							json.items, function(i,item) {  
        								if(item.state!="OK") {  
        									sthWrong = true;  
        								}  
        								MarkFormField(item.field,item.state);  
        							}  
        						);	  
        						if(sthWrong) {  
        							$("#frm_submit").removeAttr("disabled"); // enable submit button again  
        							return false;  
        						} else {  
        							InsertUser(str);  
        						}  
        				  }, "json" );  
          
        		// finish (do not submit the form)  
        		return false;  
        	});  
        });  
          
          
        function InsertUser(myparams)  
        {  
        	$.ajax({  
        		type: "POST",  
        		url: "sources/ajax/insert_customer.php",  
        		data: myparams,  
        		success: function(msg) {  
        			if(msg == 'OK') { // Message Sent? Show the 'Thank You' message and hide the form  
        				$("form:last").fadeOut("slow",function() {  
        					$("#registration_successfull").fadeIn("slow");  
        				});	  
        			}	  
        			else {  
        				$("form:last").fadeOut("slow",function() {  
        					$("#registration_failed").fadeIn("slow");  
        				});	  
        			}							  
        		}  
        	});  
        }  
          
        
        

        Der jeweilige PHP-Code liefert mir nun mittels json_encode das entsprechende JSon-Objekt.

        MfG,
        Sympatisant

        --
        "If the future isn't bright, at least it is colorful"
  2. Hi,

      Validate(); // ==> DER REST DES CODES MUSS WARTEN, BIS DIE FUNKTION  
    

    // (INKL. CALLBACKS) ABGESCHLOSSEN SIND...

    warum sollte er das tun - wenn Du ihn nicht wiederrum als Callback aus Validate aufrufst. Während Dein Post läuft wird das Script ja weiter abgearbeitet...

    Gruesse, Joachim

    --
    Am Ende wird alles gut.