0

次のコードを使用してデータベースからデータを取得し（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();
                  });

ギータ。

4

3 に答える 3

1

簡単: ajax() メソッドを起動する前に、スピナー画像を表示します。成功メソッドでは、再度非表示にします。

于 2010-05-19T12:10:32.747 に答える
1 
$.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 クエリを取得または送信する要素です。

于 2010-05-19T12:15:31.640 に答える
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();
});
于 2010-05-19T13:20:56.390 に答える