我有一个非常复杂的搜索,它使用多个ajax调用,流程如下:
user performs search on button click
ajax request is made to php page which returns json data
for each result in returned data additional ajax request is made
run function which makes additional ajax call
end for each
end click function
这一切都很好用,我想做的是在div中显示加载消息并禁用搜索按钮,然后当所有ajax请求完成后重新启用按钮并删除加载消息。
我的脚本在下面,此时按钮的禁用/重新显示几乎瞬间发生,我认为因为ajax调用是asyncronus,我如何重新启用按钮并在所有ajax请求后删除加载消息已完成并显示数据??
$('#advKeyBtn').live('click', function() {
$('#advKeyBtn').attr('disabled', 'disabled');
$('#searchStatus').html(' Searching Locations...');
$('#results').html(''); //clear existing contents
$('#borough_links').html(''); //clear existing contents
// handler for 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 what the error was and display the 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 an area to view locations');
});
以及从主要ajax调用的初始成功调用的函数
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 what the error was and display the appropriate message
},
success: function(myData){
$(divId).html(myData);
}
});
};