jQuery: wait for div content to load via ajax before fadeIn

JavaScript
1

Hi,

Just started working with jQuery and AJAX and I have a quick question regarding the fadeIn function.

I have a form that is submitted to a PHP page. The PHP processes the form (using a script from DHTMLsuite) and outputs text. Using AJAX this text is then shown in a div tag with the id #results on the same page as the initial form.

I have the following jQuery code:


<script>
	$("#mySubmit").click(function () {
		var formObj = new DHTMLSuite.form({ formRef:'myForm',action:'dostuff.php',responseEl:'results'});
		$("#results").fadeOut(300, function(){formObj.submit();});
		$("#results").fadeIn(300);
		return false;
	}); 	
</script>

So, when the user clicks the “mySubmit” button the #results div will ade out, submit the form and then the #results div will fade in again. The problem I am having is this - the #results div fades back in before the dostuff.php page has finished executing so that the content of #results changes suddenly when the AJAX response comes back. What I want is for #results to fade out, the form gets submitted and comes back setting #results to the new content, then #results fades back in.

It seems simple enough but I’m having a few problems so any help is appreciated.

Thanks.

2

You could use the ready API to fadeIn the element when its ready. Alternatively if you use the ajax api you can set the element to fadeIn when the request is successful.