Блог

Следующий код загружает page-handler.php в #page при запуске функции load и во время ожидания отображается ajax_load. Как я могу сделать так, чтобы отправляющее сообщение ajax_load отображалось в другом div и, конечно, исчезало по завершении отправки?

 function load(value) {
    $('#page').html(ajax_load);
    $("#page").load("page-handler.php", {page:value});
    return false;
}
  

Вы начинаете с создания скрытого div с загрузочным сообщением:

  <div id="loading">loading...</div>
  

Затем в вашей функции:

 function load(value) {
    $('#loading').show();
    $('#page').html(ajax_load);
    $("#page").load("page-handler.php", {page:value}, function(){
            $('#loading').hide();
    });
    return false;
}
  

конечно, вы должны что-то сделать, если вызов ajax не удался.

 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;
}
  

Это поместит содержимое во все, что имеет идентификатор ‘somediv’. Вы можете использовать класс ( '.class' ) или несколько других селекторов для выбора вашего div.

Рассмотрите возможность использования $ (‘#selector’).ajaxStart() и $ (‘#selector’).ajaxStop();

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

Покажите div перед началом вашего вызова и скройте его при обратном вызове, например:

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

Итак, я думаю, это то, что вы хотите?

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

Это скроет другой div при загрузке ajax.