juppix: Ajax beforeSend: Abbruch/Cancel des Ajax Requests

Juhuuu... mal wieder ne Frage:

Ich möchte BEVOR ein Ajax-Call stattfindet (neues Objekt in DB angelegt wird) eine vorgelagerte Ajax-Abfrage machen, ob es bereits (andere) existierende Objekte gibt.

Diese möchte ich anzeigen (Dialogbox über bootboxjs). Wenn der User auf "Abbruch" klickt, soll der eigentliche Ajax-Call (Objekt in DB neu anlegen) NICHT ausgeführt werden.

Der Dialog mit den Infos erscheint zwar, aber scheinbar wird der Ajax-Call ohne "warten" auf die User-Bestätigung ausgeführt und ebenso der success-Teil.

Also wird quasi nicht "gewartet" auf die User-Aktion sondern im Hintergrund der Ajax-Call ausgeführt.

Erbitte Hilfe 😀

Hier mal mein Code:

$('#btnSubmit').on('click', function (e) {		
		 		$.ajax({
				beforeSend: function(xhr) { 						
						// Ueberschneidungspruefung --------------------------------------------------------- //
						if( $("#SelectTyp").val()=="3" ||  $("#SelectTyp").val()=="4") {	 
							$.ajax({
								type:'GET',
								url:'getUeberschneidungsInfo.php?UserId=' + $("#SelectKonto option:selected").val() + '&datum=' + $("#Datepicker").val(),
								dataType: "json",			            
								success: function(data){				
									if(data.length == 0) {
										//console.log('no data!');
									} else { 
										//console.log('data ok!');					
										tempText = '<ul>';
										data.forEach(function(element) {					  
										  tempText += '<li>' + element.name + ', ' + element.vorname + '<i> (' + element.text_long + ')</i></li>';
										});
										tempText += '</ul>';									
										
										// ---- Konten-Ueberschneidungs-Bestaetigungs-Dialog ------------ //
										bootbox.confirm({
											title: "&Uuml;berschneidungspr&uuml;fung",
											message: "Folgende Personen haben eine Überschneidung:<br/><br/>" + tempText,
											buttons: {
												cancel: {
													label: '<i class="fa fa-times"></i> Abbruch'
												},
												confirm: {
													label: '<i class="fa fa-check"></i> Weiter'
												}
											},
											callback: function (result) {
												//console.log('This was logged in the callback: ' + result);
												if(result) {
													console.log('eintragen!');
												} else {
													console.log('nicht eintragen!');
													xhr.abort();
												}
											}
										});
										// -------------------------------------------------------------- //					
									}
								},
								error: function() { 
										alert("Error!: GetUserInfo()"); 
								}       			
							});
						}
						// Ueberschneidungspruefung --------------------------------------------------------- //
				},
				type: "POST",  
				url: "record_add.php",
				data: $('form.form-horizontal').serialize() + '&typ=item&UserId=' + $("#SelectKonto option:selected").val(),				
				success: function(response){ 										
					$( "div.alert-success" ).html("<i style=\"font-size:2em;\" class=\"far fa-check-circle\"></i> " + response).fadeIn( 600 ).delay( 2500 ).fadeOut( 600 );		

akzeptierte Antworten

  1. hi,

    Also wird quasi nicht "gewartet" auf die User-Aktion sondern im Hintergrund der Ajax-Call ausgeführt.

    Klar, weil das asynchron losrennt 😉

    Synchron machen. MfG

    1. okay.. aber wie? async : false; wird nicht mehr supportet!

      1. okay.. aber wie? async : false; wird nicht mehr supportet!

        Selbst wenn: Soooo einfach ist es ja nun auch wieder nicht 😉

    2. Klar, weil das asynchron losrennt 😉

      Das ist korrekt.

      Synchron machen.

      Das ist der falsche Ansatz. Damit lässt sich die Seite nicht mehr bedienen, bis die Ajax-Anfrage beendet ist, falls sie je beendet wird. Eine Lösung wäre die asynchronen Aufrufe so zu sortieren, dass sie in der richtigen Reihenfolge ausgeführt werden. dedlfix hat den entscheidenden Hinweis bereits gegeben.

  2. Tach!

    Der Dialog mit den Infos erscheint zwar, aber scheinbar wird der Ajax-Call ohne "warten" auf die User-Bestätigung ausgeführt und ebenso der success-Teil.

    Also wird quasi nicht "gewartet" auf die User-Aktion sondern im Hintergrund der Ajax-Call ausgeführt.

    beforeSend() muss false zurückgeben, damit der Request abgebrochen wird. Das geht aber nicht, weil die Fuktion bereits beendet ist, bevor der darin angestoßene Ajax-Request sein Ergebnis-Callback ausführt. Sowas ließe sich nur dann lösen, wenn beforeSend() ein Promise als Ergebnis haben wollen würde, das man dann entsprechend zurückweisen könnte. beforeSend() ist also nicht der richtige Weg. Stattdessen könntest du den Request erst bei Nutzerbestätigung starten.

    dedlfix.