jquery & ajax Scriptablaufreihenfolge

[Martin Schneider]

Hallo,

ich habe ein Problem mit meinem Script, welches ein Anmeldeformular checkt und dann abschicken soll.
Standardabfragen, ob Felder ausgefüllt sind, sind kein Problem.
Aber danach möchte ich über Ajax checken, ob der Username oder die Email-Adresse schon vergeben sind.

Wenn auch das passt, soll das Forumar abgeschickt werden. Allerdings tut er das nicht, da ich am ende 'return false' gesetzt habe.
Dies muss ich aber, da er das Formular sonst abschicken würde, ohne das Ajax-Script auszuführen.

Anbei nun mein Code.
Ich habe ein paar alerts eingefügt, um die Reihenfolge des Ablaufs zu prüfen.
Wenn alle eingaben Stimmen ist das die Reihenfolge: 1,6,2,3

Codeschnipsel (als PHP, damit es schön bunt ist ):

$("#register_form").submit(function(){
	var nickname = $("#DNickname").attr("value");
	var email = $("#eMail").attr("value");
	var password = $("#Password").attr("value");
	var day = $(".Tag");
	var month = $(".Monat");
	var year = $(".Jahr");
	var tag = '';
	var monat = '';
	var jahr = '';
	var gender = $("#gender")[0].selected;
	var agb = $("#AGB")[0].checked;
	var fehler = '';
	for(var i = 0; i < day.length; i++){
		if(day[i].selected==true) {
			tag = day[i].value;
		}
	}
	for(var i = 0; i < month.length; i++){
		if(month[i].selected==true) {
			monat = month[i].value;
		}
	}
	for(var i = 0; i < year.length; i++){
		if(year[i].selected==true) {
			jahr = year[i].value;
		}
	}
	if(nickname == ''){ fehler += '<li>Bitte gin einen Nicknamen ein</li>'; }
	if(email == ''){ fehler += '<li>Gib bitte eine Email-Adresse an</li>'; }
	if(password == ''){ fehler += '<li>Bitte gib ein Passwort ein</li>'; }
	if(tag == '' || monat == '' || jahr == ''){ fehler += '<li>Bitte gib dein Geburtsdatum ein</li>'; }
	if(tag == 31 && (monat == 2 || monat == 4 || monat == 6 || monat == 9 || monat == 11)){ fehler += '<li>Das Geburtsdatum ist ung&uuml;ltig</li>'; }
	if(gender == true){ fehler += '<li>Bitte gib ein Geschlecht an</li>'; }
	if(agb == false){ fehler += '<li>Du musst die AGB\'s annehmen</li>'; }

	alert('1');
	
	if(fehler == ''){
		$.ajax({
			type: "POST", url: "/ajax_reloader/register_check.php", data: "action=check&email=" + email + "&nickname=" + nickname,
			complete: function(data){
				alert('2');
				if(data.responseText == 'okay'){
					alert('3');
					return true;
				}else{
					alert('4');
					$("ul#Fehler > li").remove();
					$("ul#Fehler").append(data.responseText);
				}
			}
		});
	}else{
		alert('5'+fehler);
		$("ul#Fehler > li").remove();
		$("ul#Fehler").append(fehler);
	}
	alert('6');
	return false;

});

Nun die Frage: Warum überspringt er erst den Ajax-Code? Und wieso schickt er das Formular dann nicht ab, obwohl ich direkt nach alert('3'); return true ausgebe?

Danke für Eure Hilfe
Martin

 

[DeluXe]

Nun die Frage: Warum überspringt er erst den Ajax-Code? Und wieso schickt er das Formular dann nicht ab, obwohl ich direkt nach alert('3'); return true ausgebe?

Welche altert's kommen denn derzeit?
Es ist zwar gut zu wissen, was kommen sollte - nur besser wäre noch zu wissen, was tatsächlich kommt.

Hast du dir den Inhalt von data mal ausgeben lassen? Steht in data.responseText wirklich "okay"? Wird wenigstens der else-Zweig ausgeführt?

Am besten einfach mal ein console.log( data ); machen, natürlich in Verbindung mit Firebug.

 

[Martin Schneider]

Welche altert's kommen denn derzeit?
Es ist zwar gut zu wissen, was kommen sollte - nur besser wäre noch zu wissen, was tatsächlich kommt.

Hast du dir den Inhalt von data mal ausgeben lassen? Steht in data.responseText wirklich "okay"? Wird wenigstens der else-Zweig ausgeführt?

Am besten einfach mal ein console.log( data ); machen, natürlich in Verbindung mit Firebug.

Hallo,

danke für die schnelle Antwort.
Wie schon geschrieben kommen folgende alerts: 1,6,2,3
Das heißt, dass er den else-Zweig ausführt, aber das Formular dann nicht abschickt, obwohl return true ausgegeben wird.

 

[DeluXe]

Ach so meinst du das, ich habe das eben anders verstanden.

Das Problem ist, dass $.ajax sich nicht auf $.submit bezieht und man somit auch keinen Wert zurückgeben kann.

Der einfachste Weg wäre wohl, an Stelle des return true; einfach nochmal jQuery( this ).submit() zu schreiben.

Das eigentliche Submit-Event hast du ja mit dem return false; (Sprich alert 6) schon abgebrochen.

 

[Martin Schneider]

Ach so meinst du das, ich habe das eben anders verstanden.

Das Problem ist, dass $.ajax sich nicht auf $.submit bezieht und man somit auch keinen Wert zurückgeben kann.

Der einfachste Weg wäre wohl, an Stelle des return true; einfach nochmal jQuery( this ).submit() zu schreiben.

Das eigentliche Submit-Event hast du ja mit dem return false; (Sprich alert 6) schon abgebrochen.

Das funktioniert leider nicht.
ist this in dem Fall nicht das Formular? Damit würde doch die submit-funktion wieder greifen, oder?

Also im Moment habe ich vor jQuery( this ).submit() noch ein alert gesetzt. Dieses bekomme ich ausgegeben und dann passiert nichts...

Ich hoffe, du hast noch andere Lösungsvorschläge
Würde es was bringen, die Ajax-Funktion in eine extra funktion zu packen, die das ergebnis zurückgibt? dann könnte ich damit doch abfragen, ob er 'okay' zurückgibt und damit den wert für return steuern!?

War das Verständlich?

 

[DeluXe]

Würde es was bringen, die Ajax-Funktion in eine extra funktion zu packen, die das ergebnis zurückgibt?

Nein, da du auch dann wieder darauf angewiesen wärst, dass $.ajax etwas zurück gibt.

Aber stimmt, du bist zu dem Zeitpunkt schon wieder in einem ganz anderen Scope, zumal der zeitliche Versatz auch noch hinzu kommt.

Dann musst du innerhalb der submit-Methode var form = jQuery( this ); hinzufügen und später einfach auf form.submit() zugreifen, das sollte tun.

 

[Martin Schneider]

Nein, da du auch dann wieder darauf angewiesen wärst, dass $.ajax etwas zurück gibt.

Aber stimmt, du bist zu dem Zeitpunkt schon wieder in einem ganz anderen Scope, zumal der zeitliche Versatz auch noch hinzu kommt.

Dann musst du innerhalb der submit-Methode var form = jQuery( this ); hinzufügen und später einfach auf form.submit() zugreifen, das sollte tun.

Das wollte leider auch nicht so recht klappen.
Ich hab es nun anders gelöst. Ich setze im Formular 2 input-Felder mit je einer ID und display: none.

In der jQuery-Funktion frage ich dann ab, ob mindestens eines der beiden vorhanden ist.
Wenn ja, führt er den Code zum validieren aus und setzt return false.
Dann entfernt er das erste INPUT, wenn alles ausgefüllt wurde. Folgend wird der ajax-Code ausgeführt und im Falle, dass auch dort ein 'okay' zurückgegeben wird, entfernt er den zweiten INPUT. Dann führt er einfach $("#register_form").submit(); nochmal aus und da dieses mal beide INPUT's entfernt wurden, überspringt er den kompletten Prozess und führt das Formular aus.

Damit klappt es nun endlich
Danke, DeluXe, für deine Hilfe.


LG,
Martin

Falls es interessiert:

$("#register_form").submit(function(){
	if($("input#1").length > 0 || $("input#2").length > 0){
		var nickname = $("#DNickname").attr("value");
		var email = $("#eMail").attr("value");
		var password = $("#Password").attr("value");
		var day = $(".Tag");
		var month = $(".Monat");
		var year = $(".Jahr");
		var tag = '';
		var monat = '';
		var jahr = '';
		var gender = $("#gender")[0].selected;
		var agb = $("#AGB")[0].checked;
		var fehler = '';
		for(var i = 0; i < day.length; i++){
			if(day[i].selected==true) {
				tag = day[i].value;
			}
		}
		for(var i = 0; i < month.length; i++){
			if(month[i].selected==true) {
				monat = month[i].value;
			}
		}
		for(var i = 0; i < year.length; i++){
			if(year[i].selected==true) {
				jahr = year[i].value;
			}
		}
		if(nickname == ''){ fehler += '<li>Bitte gin einen Nicknamen ein</li>'; }
		if(email == ''){ fehler += '<li>Gib bitte eine Email-Adresse an</li>'; }
		if(password == ''){ fehler += '<li>Bitte gib ein Passwort ein</li>'; }
		if(tag == '' || monat == '' || jahr == ''){ fehler += '<li>Bitte gib dein Geburtsdatum ein</li>'; }
		if(tag == 31 && (monat == 2 || monat == 4 || monat == 6 || monat == 9 || monat == 11)){ fehler += '<li>Das Geburtsdatum ist ung&uuml;ltig</li>'; }
		if(gender == true){ fehler += '<li>Bitte gib ein Geschlecht an</li>'; }
		if(agb == false){ fehler += '<li>Du musst die AGB\'s annehmen</li>'; }

		if(fehler != ''){
			$("ul#Fehler > li").remove();
			$("ul#Fehler").append(fehler);
		}else{
			$("input#1").remove();
			$.ajax({
				type: "POST", url: "/ajax_reloader/register_check.php", data: "action=check&email=" + email + "&nickname=" + nickname,
				complete: function(data){
					if(data.responseText == 'okay'){
						$("input#2").remove();
						$("#register_form").submit();
					}else{
						$("ul#Fehler > li").remove();
						$("ul#Fehler").append(data.responseText);
					}
				}
			});
		}
		return false;
	}else{
		return true;
	}
});