AJAX callback functions
Moderator: General Moderators
AJAX callback functions
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...
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
Can you show us how you use AJAX? do you use a library?
Re: AJAX callback functions
(sorry, I didn't subscribe to the post and hadn't realized someone replied...my bad
)
I just have a basic JS function that calls out to my PHP processor page:
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
This part is where the AJAX requests completes
You can run whatever code you want between the braces, including calling functions.
Code: Select all
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
...
}
Re: AJAX callback functions
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?
doThis(variableOne, variableTwo, function(){ nameOfRealFunction();}); <---would that be it?
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Re: AJAX callback functions
pytrin wrote:You can run whatever code you want between the braces, including calling functions.
You can put ANY code between the braces.avivm3 wrote:Understood. But --
Re: AJAX callback functions
But how do I GET the code for my callback function into my AJAX function?
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Re: AJAX callback functions
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
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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Re: AJAX callback functions
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
Right on man, exactly what I was looking for. That did it...Thanks!!
Re: AJAX callback functions
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()?
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
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
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?
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
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).
<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).