Состояние загрузки jQuery для $.ajax

Question

Я использую следующий код для получения данных из базы данных (с самой страницы cs я создаю HTML-код) и привязываю HTML-код к DIV.

Проблема:

Если размер базы данных больше, для отображения результата требуется некоторое время. тогда я хочу загрузить изображение loading.gif в этом месте. Как только он получит данные, я должен скрыть загруженное изображение.

Редактировать:

Проблема: как только он скрывается, тогда show() не работает.

 <div id="searchContainer" class="search_outer">
        <div id="Loading"></div></div>

Код:

    $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  data: "{ searchText: '" + searchText + "', product: '" + product + "', category: '" + category + "', artist:'" + artist + "'}",
                  url: "Search.aspx/FetchSearchResult",
                  dataType: "json",
                  success: function(data) {  $("#Loading").hide(); $("#searchContainer").html(data.d[0]);}});


     $("#ajax-query-place").ajaxStart(function() {
                      $("#Loading").show();
                  });

Гита.

Answer 1

Беда в вашем success: Перезвоните. Когда вы делаете:

$("#searchContainer").html(data.d[0]);

Вы перезаписываете #Loading элемент, потому что он внутри #searchContainer,

использование append() вместо.

function(data) {  
    $("#Loading").hide(); 
    $("#searchContainer").append(data.d[0]);
}

Или просто переместите #Loading элемент за пределами #searchContainer элемент.

---

РЕДАКТИРОВАТЬ:

Я предполагаю, что у вас нет элемента под названием #ajax-query-place,

Вы должны использовать:

$("#searchContainer").ajaxStart(function() {
     $("#Loading").show();
});

Answer 2

Легко: перед запуском ajax()- метода, отобразите изображение счетчика. В методе успеха скройте это снова.

Answer 3

$.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  data: "{ searchText: '" + searchText + "', product: '" + product + "', 
                  category: '" + category + "', artist:'" + artist + "'}",
                  url: "Search.aspx/FetchSearchResult",
                  dataType: "json",
                  success: function(data) { $("#searchContainer").html(data.d[0]);
                                            $("#loading-image").hide();
}});

$("#ajax-query-place").ajaxStart(function(){
      $("#loading-image").show();
});

$("#ajax-query-place") - это элемент, который получает или отправляет ajax-запросы.