What is javascript's deal?!

[aeroswat]

Javascript is frustrating as hell... I can't understand why this is happening but it is handling code out of order...

 

Basically I have a function that calls another function. Both have alerts.

Function A calls function B then alert's the result of function B. Function A's alert fires before function B's alerts and function A alert's before function B even returns anything resulting in an undefined in my function A alert box... WHY? Horrible logic...

[Psycho]

I have never had such a problem. Why do you assume it is JavaScript that is illogical and not your code? No offense, but everytime I have code that is doing something wacky it always turns out to be my own fault. In any event, it is impossible for anyone to help you if you do not post the code in question.

[aeroswat]

I have never had such a problem. Why do you assume it is JavaScript that is illogical and not your code? No offense, but everytime I have code that is doing something wacky it always turns out to be my own fault. In any event, it is impossible for anyone to help you if you do not post the code in question.

 

Function A

	function changeISBN(ctrl) {
	var isbn=document.getElementById("edit" + ctrl).value;
	var str=document.getElementById(ctrl);

	disChange2('ISBN');
	var bla=update('isbn',isbn);
	alert(bla);
	//if(update('isbn',isbn)=='1') {
		//str.value = isbn;
	//}
}

 

Function B

	function update(fInp, valu) {
	var ord = document.getElementById('ctrordernumber').value;

	if(fInp.length != 0 && valu.length != 0){
		$.post("updateorder-exec.php", {field: ""+fInp+"", val: ""+valu+"", on: ""+ord+""}, function(data){
			var data=data.substr(0,data.search("#STOP#"));
			if(data.length >0) {
				if(data == 1) {
					$('#errDiv').show();
					$('#errDiv').html("<h3><b>Database updated!</b></h3>");
					//$('#errDiv').fadeOut(8000);
					return 1;
				}else {
					$('#errDiv').show();
					$('#errDiv').html("<h3><b>Error. Incorrect information entered!</b></h3>");
					//$('#errDiv').fadeOut(8000);
					return 0;
				}
				return data;
			}
		});
	}else {
	alert('error2');
	$('#errDiv').show();
	$('#errDiv').html("Error. Incorrect information entered!");
	$('#errDiv').css('opacity',100).fadeOut(10000);

	return 0;
	}
}

 

Function A's alert is called before any of function B's alerts...

[aeroswat]

Also... the bottom most part (of the update function), if I don't wrap that in an else statement it will execute that part and then come back up and execute the part that is inside of the if statement...

 

and thankyou for coming over to the javascript forum to help me

[Psycho]

OK, I don't use JQuery so some of this is conjecture. But, it appears that in the update() function within the IF statement you are creating a function? If so, that probably explains what is going on. How does that created function get triggered?

 

I think what is happening is that the first time update() is called it is creating the function, but the function is not being run (at least not within the context of update(). So, the return within that created function doesn't apply to the update function. That explains why you need to put the subsequent code within the else block. The return of the created function is not within the scope of update() so the code execution in update() would continue and always run the code after the IF statement (when it is not within an else statement).

 

Again, since the returns within the created function are probably not run within the scope of update() you are getting an undefined error when the IF section of update is run because there is no return value sent back to changeISBN.

[roopurt18]

Also... the bottom most part (of the update function), if I don't wrap that in an else statement it will execute that part and then come back up and execute the part that is inside of the if statement...

 

You're using jquery's post() function which is probably asynchronous.  Do you understand the difference between synchronous and asynchronous?

[aeroswat]

Also... the bottom most part (of the update function), if I don't wrap that in an else statement it will execute that part and then come back up and execute the part that is inside of the if statement...

 

You're using jquery's post() function which is probably asynchronous.  Do you understand the difference between synchronous and asynchronous?

 

Maybe i'm just silly for wondering this but why on earth would they make it asynchronous? Because they expect the php file to take forever to execute? What would I use to get around this? What do us humble people with relatively small databases do when we need to use javascript in line with php but want code to execute synchronously?

[Mchl]

Never worked with jQuery, but other libraries usually offer you the ability to provide a callback (a function really) to asynchronous functions that is fired when reply from server is received.

[aeroswat]

Thanks guys... does anyone know if I can use jQuery's .ajax to perform the same function?

[Mchl]

A in AJAX stands for 'asynchronous', so don't expect anything else.

[roopurt18]

http://docs.jquery.com/Ajax/jQuery.post

Doesn't imply one way or another if it's asynch or not.  But there is a high probability it uses the XMLHttpRequest object in some fashion which does provide a mechanism to make requests either synch or asynch.

 

http://docs.jquery.com/Ajax/jQuery.ajax#options

Tells you how to use the ajax() method and set the request to synchronous.

 

@Mchl

AJAX is a misnomer anyways and has nothing to do with the XMLHttpRequest object.  The XMLHttpRequest object can perform either type of request.

[Mchl]

@Mchl

AJAX is a misnomer anyways and has nothing to do with the XMLHttpRequest object.  The XMLHttpRequest object can perform either type of request.

 

I must trust you on that. I'm one of those cripples who can only use this or other library, but suck in 'low-level' JavaScript

 

[roopurt18]

The technical tools for performing AJAX have been around since the 1990s.  AJAX is just a term coined by some guy to describe what he was doing; he didn't do anything other than provide an acronym for stuff that already existed and was already being used.

 

Also, I think many more people favor pushing JSON over XML due to it being more concise.  VBScript developers might disagree I guess.

[Mchl]

It's seems it's being parsed faster (by JS at least) too

[aeroswat]

So does this change of the function look ok to handle what I want?

 

	function update(fInp, valu) {
	var ord = document.getElementById('ctrordernumber').value;

	if(fInp.length != 0 && valu.length != 0){
		$.ajax({
			type: "POST",
			url: "updateorder-exec.php",
			data: "field="+fInp+"&val="+valu+"&on="+ord, 
			async: false,
			success: function(data){
				var data=data.substr(0,data.search("#STOP#"));
				if(data.length >0) {
					if(data == 1) {
						$('#errDiv').show();
						$('#errDiv').html("<h3><b>Database updated!</b></h3>");
						$('#errDiv').fadeOut(8000);
						return 1;
					}else {
						$('#errDiv').show();
						$('#errDiv').html("<h3><b>Error. Incorrect information entered!</b></h3>");
						$('#errDiv').fadeOut(8000);
						return 0;
					}
					return data;
				}
			}
		});
	}
	alert('error2');
	$('#errDiv').show();
	$('#errDiv').html("Error. Incorrect information entered!");
	$('#errDiv').css('opacity',100).fadeOut(10000);

	return 0;
	}
}

[aeroswat]

So I tried these two functions and i have 1 problem... Now the alert's are triggering in the correct order. I get an update alert before I get a undefined alert from my changeISBN function but it's still undefined... any ideas on that?

 

	function changeISBN(ctrl) {
	var isbn=document.getElementById("edit" + ctrl).value;
	var str=document.getElementById(ctrl);

	disChange2('ISBN');
	var bla=update('isbn',isbn);
	alert(bla);
	//if(update('isbn',isbn)=='1') {
		//str.value = isbn;
	//}
}

 

function update(fInp, valu) {
	var ord = document.getElementById('ctrordernumber').value;

	if(fInp.length != 0 && valu.length != 0){
		$.ajax({
			type: "POST",
			url: "updateorder-exec.php",
			data: "field="+fInp+"&val="+valu+"&on="+ord+"", 
			async: false,
			success: function(msg){
				var msg=msg.substr(0,msg.search("#STOP#"));
				if(msg.length >0) {
					if(msg == 1) {
						$('#errDiv').show();
						$('#errDiv').html("<h3><b>Database updated!</b></h3>");
						$('#errDiv').fadeOut(8000);
						alert('updated');
						return '1';
					}else {
						$('#errDiv').show();
						$('#errDiv').html("<h3><b>Error. Incorrect information entered!</b></h3>");
						$('#errDiv').fadeOut(8000);
						alert('error');
						return 0;
					}
					return msg;
				}
			}
		});
	} else{
	alert('error2');
	$('#errDiv').show();
	$('#errDiv').html("Error. Incorrect information entered!");
	$('#errDiv').css('opacity',100).fadeOut(10000);

	return 0;
	}
}

[aeroswat]

I figured it out! Apparently you cannot do your return inside of the success function. You must do it outside of the scope of the success function yet inside the scope of the parent function. I have included my updated code to show what changes I made for anyone else who may have this problem in the future. You will notice the changes I've made with arrows at the beginning of their line

 

THANKYOU EVERYONE for helping with this!

 

	function update(fInp, valu) {
	var ord = document.getElementById('ctrordernumber').value;
--->		var upd = 0;

	if(fInp.length != 0 && valu.length != 0){
		$.ajax({
			type: "POST",
			url: "updateorder-exec.php",
			data: "field="+fInp+"&val="+valu+"&on="+ord+"", 
			async: false,
			success: function(msg){
				var msg=msg.substr(0,msg.search("#STOP#"));
				if(msg.length >0) {
					if(msg == 1) {
						$('#errDiv').show();
						$('#errDiv').html("<h3><b>Database updated!</b></h3>");
						$('#errDiv').fadeOut(8000);
						alert('updated');
--->							upd = 1;
					}else {
						$('#errDiv').show();
						$('#errDiv').html("<h3><b>Error. Incorrect information entered!</b></h3>");
						$('#errDiv').fadeOut(8000);
						alert('error');
					}
				}
			}
		});
	} else{
	alert('error2');
	$('#errDiv').show();
	$('#errDiv').html("Error. Incorrect information entered!");
	$('#errDiv').css('opacity',100).fadeOut(10000);
	}
--->		return upd;
}

[Psycho]

I figured it out! Apparently you cannot do your return inside of the success function. You must do it outside of the scope of the success function yet inside the scope of the parent function.

 

You figured it out? Isn't that what I said in my first response?

 

Just giving you crap. As long as you solve your problem - that's the goal.

[roopurt18]

Make sure you mark your topics "Solved."

[aeroswat]

I figured it out! Apparently you cannot do your return inside of the success function. You must do it outside of the scope of the success function yet inside the scope of the parent function.

 

You figured it out? Isn't that what I said in my first response?

 

Just giving you crap. As long as you solve your problem - that's the goal.

 

Sorry Didn't full understand that post Thank you though