AJAX callback functions

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

AJAX callback functions

Post 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...
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: AJAX callback functions

Post by Eran »

Can you show us how you use AJAX? do you use a library?
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: AJAX callback functions

Post 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);
}
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: AJAX callback functions

Post 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.
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: AJAX callback functions

Post 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?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: AJAX callback functions

Post 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.
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: AJAX callback functions

Post by avivm3 »

But how do I GET the code for my callback function into my AJAX function?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: AJAX callback functions

Post 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.
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: AJAX callback functions

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: AJAX callback functions

Post 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');
});
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: AJAX callback functions

Post by avivm3 »

Right on man, exactly what I was looking for. That did it...Thanks!!
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: AJAX callback functions

Post 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()?
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: AJAX callback functions

Post 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.
avivm3
Forum Commoner
Posts: 31
Joined: Mon Jul 12, 2010 5:29 pm

Re: AJAX callback functions

Post 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?
Razorback64
Forum Newbie
Posts: 2
Joined: Sun Aug 08, 2010 12:28 am

Re: AJAX callback functions

Post 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).
Post Reply