Hi I am trying to call two user defined functions and expecting the first one has to execute first and then the second one.. but they are executing simultaneously.
$.firstfunc = function(){
//Do something
//jQuery.ajax({
});
$.secondfunc = function(){
//Do something
jQuery.ajax({
});
$.(document).ready(function(){
$.firstfunc();
$.secondfunc();
});
any help would be appreciated.
Thanks!
Warning: Requires jQuery 1.5+
$.firstfunc = function() {
return $.ajax({});
}
$.secondfunc = function() {
return $.ajax({});
}
$(function() {
$.when($.firstfunc).then($.secondfunc);
});
Using the black magic of $.Deferred's and $.when.
It basically says when you first function finishes its ajax call then call the second function.
This is because $.ajax returns a jqXHR object which inherits from $.Deferred.
If you want to attach a callback when both $.firstfunc and $.secondfunc complete then you can do the following (requires jQuery 1.6):
$(function() {
$.first().pipe($.second).done(function(second_data) {
// both finished.
});
});
Legacy: jQuery 1.4.2 & 1.3.2 support.
$.firstfunc = function(cb) {
$.ajax({
success: function() {
...
cb();
},
...
});
}
$.secondfunc = ...
$(function() {
$.firstfunc($.secondfunc);
});
.pipe is awesome for middleware.
.pipe as a suggestion here -- I thought it's primary use is to filter before resolving the deferred objects, so surely .when is sufficient enough here? "If you need to use the result from $.firstfunc in $.secondfunc" -- this is exactly what your .when example does, it passes data from the firstfunc through the .then and therefore onto the secondfunc.Have the first function call the second function after the code.
function firstfunc() {
// Do something
secondfunc();
}
function secondfunc() {
// Do something else
}
EDIT (now that I see your edit):
Use the callback portion of the ajax functions.
$.get("somepage.php", "key1=value1&key2=value2", function(data) {
// This code will run when the result is received
});
That happens because Ajax requests are processed Asynchronously. If you want the second function to run after the first, add it to the callback function of the first Ajax request.
You should call the second one from the callback of the first .ajax call.
You can either define it explicitly:
$.firstfunc = function(){
//Do something
jQuery.ajax({
callback:$.secondfunc
});
};
$.secondfunc = function(){
//Do something
jQuery.ajax({
});
};
$(document).ready(function(){
$.firstfunc();
});
...or pass it as an argument:
$.firstfunc = function( func ){
//Do something
jQuery.ajax({
callback:func
});
};
$.secondfunc = function(){
//Do something
jQuery.ajax({
});
};
$(document).ready(function(){
$.firstfunc( $.secondfunc );
});
secondfuncin the success function of firstfunc ajax.