Execution order

I have an issue that I suspect is related to how the statements are executing but would like some clarification if possible.

The idea is that when I click a.nomgrouplist2 it passes the value to a .php script for evaluation and returns an <h3> value that will be “Select” or “Selected”. There are two <h3> tags on the page that operate independently so if both indicate “Selected” then I want to show another form which is what $(‘#nomvoteform’).replaceWith(data2); does.

So I execute procsrchbsns(passdata) and then I want to execute checkSelected() after procsrchbsns has completed to see if both <H3> tags are “Selected”, but since I don’t always want to execute checkSelected when I execute procsrchbsns() I don’t want it inside procsrchbsns().

It appears that sometimes it executes checkSelected before it finishes procsrchbsns. Is there any way to assure that procsrchbsns is completed before it executes checkSelected?


	$('a.nomgrouplist2').live('click', function(e){ 
		e.preventDefault();
		var srchstr = $(this).attr('href').substring(4);
		var passdata = {from: "addrsel", id: srchstr};
		procsrchbsns(passdata);
		checkSelected();
	});

	function procsrchbsns(passdata){
		$.post('/js/p51_lookup.php', passdata, function(data){
			var typeret = data.substr(0, 20);
			if (typeret == '<ul id="nomcmpsrchli'){
				rettext = "<div id=\\"nomcmpsrcharea\\">" + data + "</div>";
				$('#nomcmpsrcharea').replaceWith(rettext);
			}
			else{
			        rettext = data;
				$('li#listvensel').replaceWith(rettext);
			}
		});
	}

	function checkSelected(){
		if ($('#listdishsel h3').text().substr(0, 8) == "Selected" && $('#listvensel h3').text().substr(0, 8) == "Selected"){
			$.post('/js/com_dishvotepg.php', function(data2){
				$('#nomvoteform').replaceWith(data2);
			});
		}
	};



	$('a.nomgrouplist2').live('click', function(e){ 
		e.preventDefault();
		var srchstr = $(this).attr('href').substring(4);
		var passdata = {from: "addrsel", id: srchstr};
		procsrchbsns(passdata);
	});

	function procsrchbsns(passdata){
		$.post('/js/p51_lookup.php', passdata, function(data){
			var typeret = data.substr(0, 20);
			if (typeret == '<ul id="nomcmpsrchli'){
				rettext = "<div id=\\"nomcmpsrcharea\\">" + data + "</div>";
				$('#nomcmpsrcharea').replaceWith(rettext);
			}
			else{
			        rettext = data;
				$('li#listvensel').replaceWith(rettext);
			}
                        checkSelected();
		});
	}

	function checkSelected(){
		if ($('#listdishsel h3').text().substr(0, 8) == "Selected" && $('#listvensel h3').text().substr(0, 8) == "Selected"){
			$.post('/js/com_dishvotepg.php', function(data2){
				$('#nomvoteform').replaceWith(data2);
			});
		}
	};

The problem you were having is not that checkSelected() was not being called after procsrchbsns() but possibly anytime before or after the ajax request. To do something once the ajax request is complete you must place the code inside the callback. The word is asyncronous meaning JavaScript continues, it doesn’t wait for the request to come back when making a ajax call.

Thanks, two questions. So if I don’t want to execute checkSelected every time I run procsrchbsns, I should set a variable in passdata to indicate when to run it?

Also, can I create procsrchbsns with a callback and then in the callback, execute checkSelected? Do I do that with .extend if in fact that would work?

You could or wrap everything in a self calling function and declare a variable within the scope of that function. Wrapping everything in a function will keep the global space clean though it would also work without.

Unless I misunderstood I believe your talking abut what what I did with the code provided. checkSelected() is within the scope of that function so it can be done as is as shown by modifications to your code I provided.

Thanks, I appreciate the input.