The following code loads the page-handler.php into #page when the function load is fired and while waiting shows ajax_load. How can I make the ajax_load loding-message show in another div and of course disappear when the loding is finished?
function load(value) {
$('#page').html(ajax_load);
$("#page").load("page-handler.php", {page:value});
return false;
}
You start by creating a hidden div with the loading message:
<div id="loading">loading...</div>
Then in your function:
function load(value) {
$('#loading').show();
$('#page').html(ajax_load);
$("#page").load("page-handler.php", {page:value}, function(){
$('#loading').hide();
});
return false;
}
of course you have to do something about if the ajax call did not succeed.
function load(value) {
$('somediv').html(ajax_load);
$("#page").load("page-handler.php", {page:value}, function() {
$('somediv').empty(); // or set new contents, or hide, or whatever
});
return false;
}
This will put the contents into whatever has the id 'somediv'. You can use a class ('.class') or several other selectors to choose your div.
Look into using $('#selector').ajaxStart() and $('#selector').ajaxStop();
Show a div before starting your call and hide it in a callback, e.g.:
function load(value) {
$('#busydiv').show(); // shows busy indicator
$('#page').html(ajax_load);
$("#page").load("page-handler.php", {page:value}, function() {
$('#busydiv').hide();
});
return false;
}
So I think this is what you want?
$("#anotherDiv").html(message);
$("#page").load("page-handler.php", {page:value}, function(){$("#anotherDiv").hide();});
That will hide the other div when ajax loads.
