Page 1 of 1

AJAX callback functions

Posted: Mon Aug 02, 2010 4:22 pm
by avivm3
How do I trigger a function (a callback, right?) when an AJAX script has completed successfully?

For now, I am just putting a timed delay on the functions that shouldn't happen until the AJAX piece is finished. It works, but it's definitely a band-aid...

Re: AJAX callback functions

Posted: Mon Aug 02, 2010 6:17 pm
by Eran
Can you show us how you use AJAX? do you use a library?

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 3:08 pm
by avivm3
(sorry, I didn't subscribe to the post and hadn't realized someone replied...my bad :oops: )

I just have a basic JS function that calls out to my PHP processor page:

Code: Select all

	
function runAJAX(responseElement, scriptParameters, displayMethod){

	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			
		document.getElementById(responseElement).innerHTML=xmlhttp.responseText;
		document.getElementById(responseElement).style.display=displayMethod;
		}
	  }
	xmlhttp.open("POST",processor_page.php,true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send(scriptParameters);
}

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 3:52 pm
by Eran
This part is where the AJAX requests completes

Code: Select all

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
...
}
You can run whatever code you want between the braces, including calling functions.

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 5:46 pm
by avivm3
Understood. But this whole function is reusable; I just pass it the parameters of what I need it to do. So, I guess my question is how do I pass a function as a parameter?

doThis(variableOne, variableTwo, function(){ nameOfRealFunction();}); <---would that be it?

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 5:51 pm
by superdezign
pytrin wrote:You can run whatever code you want between the braces, including calling functions.
avivm3 wrote:Understood. But --
You can put ANY code between the braces.

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 5:52 pm
by avivm3
But how do I GET the code for my callback function into my AJAX function?

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 5:56 pm
by superdezign
In JavaScript, functions are objects. Just add another parameter to your "AJAX function", pass your function as a parameter, and edit your "AJAX function" to run the provided function. Your current function only adds your response text to an element. Unless you change it, that's all it's ever going to do.

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 8:20 pm
by avivm3
The current function also changes the CSS Display property of the element, because I pass it that object. So I get the concept. But, in general, I've never passed a function before, so how do I do it? Do I have to nest it inside this-> function(){ } Can I just use the name of the function? How do I reference this "function" object from within my AJAX function? Do you know what I mean? I understand what you are saying, I just haven't seen HOW to do it.

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 8:26 pm
by superdezign
Yes and yes.

Code: Select all

function runStuff(callback) { // runs functions
  callback();
};

// -- functions --
var foo1 = function() {
  alert('bar1');
};
runStuff(foo1); // alerts 'bar1'

function foo2() {
  alert('bar2');
};
runStuff(foo2); // alerts 'bar2'

runStuff(function() { // alerts 'bar3'
  alert('bar3');
});

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 8:57 pm
by avivm3
Right on man, exactly what I was looking for. That did it...Thanks!!

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 9:39 pm
by avivm3
Ok, it works, in that the function launches. But I'm still not achieving my goal. I want the responseText to finish loading into the element before I display it, so that my smooth display animation isn't ruined by the content loading half way through it.

I added a time delay before the AJAX function executes the callback(), but it's not dynamic enough (quick things, you are waiting too long; big things aren't ready quite yet). Do you know of a way to check if the process is done before triggering the callback()?

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 10:22 pm
by JakeJ
Hide the element before the response is added in and then when it's loaded, unhide the element or something along those lines.

Re: AJAX callback functions

Posted: Wed Aug 04, 2010 10:31 pm
by avivm3
That's how it's working now. It's hidden. I load the responseText HTML into it, then I show the DIV. The problem is that it moves on to the "show" portion before the heavier sections have a chance to load fully.

So I'm thinking some sort of listener that waits to see when if it's all done. Or adding some kind of "flag" to the end of the responseText and only process the next part if the "flag" has been loaded. Know what I mean? Any ideas?

Re: AJAX callback functions

Posted: Sun Aug 08, 2010 12:30 am
by Razorback64
A bit hackish but...

<select name="publication" id="pubitemlist" onChange="this.parentNode.submit();">

should work.

This is the same as what you already tried but 'form' is now 'parentNode'. Note that if you put the select inside of a div (or something similar) you would have to change it to this.parentNode.parentNode.submit().

option 2:

<select name="publication" id="pubitemlist" onChange="document.getElementById('publi…

Either of these should work (I didn't actually run them).