jquery - perform code once all ajax requests are completed -


i've got quite complex search utilises multiple ajax calls, flow follows:

user performs search on button click ajax request made php page returns json data     each result in returned data additional ajax request made         run function makes additional ajax call     end each end click function 

this works nicely, display loading message in div , disable search button, when ajax requests have completed re-enable button , remove loading message.

my script below, @ moment disable/renable of button happening instantaneously, presume because ajax calls asyncronus, how go renabling button , removing loading message once ajax requests have completed , displayed data??

$('#advkeybtn').live('click', function() {         $('#advkeybtn').attr('disabled', 'disabled');         $('#searchstatus').html('<img src="../img/icons/loadinfo.gif" width="16" height="16" /> searching locations...');         $('#results').html(''); //clear existing contents         $('#borough_links').html(''); //clear existing contents         // handler advance search button         var myurl = 'getkeyboroughs.php';         var mykeys = $('#keywords').val();         var mytype = $('input[name=keyparams]:checked').val()                $.ajax({             url: myurl,             data: "keys=" + mykeys +'&type='+mytype,             type: "post",             traditional: false,             datatype: 'json',             error: function(xhr, statustext, errorthrown){                 // work out error , display appropriate message             },             success: function(mydata){                 // data retrived ok                 $.each(mydata.boroughs, function( intindex, objvalue ){                     //alert(mydata.boroughs[intindex].borough_id);                     makecss(mydata.boroughs[intindex].borough_id);       getkeylocations(mydata.boroughs[intindex].borough_id)                     })                     //$('#'+divid).append(mydata)//construct location holders                 }             });             $('#advkeybtn').attr('disabled', '');             $('#searchstatus').html('search complete, click on area view locations');         }); 

and function gets called initial success of main ajax call

function getkeylocations(id){                     var myurl = 'getkeylocations.php';                     var myborough = id;                     var mykeys = $('#keywords').val();                     var mytype = $('input[name=keyparams]:checked').val()                        var divid = '#borough_'+ id;                     $.ajax({                         url: myurl,                         type: 'post',                         data: 'borough_id='+myborough+'&keys='+mykeys,                         error: function(xhr, statustext, errorthrown){                             // work out error , display appropriate message                         },                         success: function(mydata){                             $(divid).html(mydata);                         }                     });                 }; 

you have create function handle requests. when requests finished enable button , show message.

var ajaxloading = {         _requestsinprocess: 0,          show: function () {             if (this._requestsinprocess == 0) {                 $('#advkeybtn').attr('disabled', 'disabled');                 $('#searchstatus').html('<img src="../img/icons/loadinfo.gif" width="16" height="16" /> searching locations...');             }              this._requestsinprocess++;         },          hide: function () {             this._requestsinprocess--;             if (this._requestsinprocess == 0) {                 $('#advkeybtn').attr('disabled', '');                 $('#searchstatus').html('search complete, click on area view locations');             }         }     }; 

now, before ajax call use:

ajaxloading.show() 

and in success methods use:

ajaxloading.hide() 

hope helps.


Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -