Geek asks and answers

Show download message in another div while waiting for jquery ajax to load

The following code loads the page-handler.php into the # page when the function loads and when waiting, shows ajax_load. How can I make ajax_load lode show in another div and of course disappear when loding ends?

function load(value) {
    $('#page').html(ajax_load);
    $("#page").load("page-handler.php", {page:value});
    return false;
}
+3
source share
5 answers
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 cause the content to contain the identifier "somediv". You can use the class ( '.class') or several other selectors to select your div.

0
source

You start by creating a hidden div with a downloadable 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 need to do something if the ajax call failed.

+2

$('# selector'). ajaxStart() $('# selector'). ajaxStop();

http://api.jquery.com/ajaxStart/

0

Show the div before the start of the call and hide it in the callback, for example:

function load(value) {
    $('#busydiv').show(); // shows busy indicator
    $('#page').html(ajax_load);
    $("#page").load("page-handler.php", {page:value}, function() {
         $('#busydiv').hide();
    });
    return false;
}
0
source

So, I think this is what you want?

$("#anotherDiv").html(message);
$("#page").load("page-handler.php", {page:value}, function(){$("#anotherDiv").hide();});

This will hide another div when loading ajax.

0
source

More articles:


All Articles