getJSONでloader.gifを表示

Question

getJSONを使用してAJAXでデータを取得する際に、ローダーgifを使用したいと考えています。私はまだ適切な解決策を見つけていない。私はこれを$("#loader").show();とこの$("#loader").hide();を使用しましたが、ページがロードされるとすぐに開始されます。私はそれが検索ボタンをクリックすると動作するようにしたい。 どのような提案も高く評価されます。ここ は私のhtmlコードです：

<div class="container"> 
     <div id="wrapper"> 
      <section id="gallery"> 
       <input type="text" id="KUNDE" placeholder="Search by name or ID." /> <di id="loader"><img src="loader.gif"/></di> 
       <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Search</button> 
       <button id="button" class="btn-style">Clean Results</button> 

      </section> 
      <ul id="list"><li> </li> </ul> 
     </div> 

ここ

は私のjqueryのコードです：

<script>   
      $("#button").click(function (e) { 
       $("#list").find('li').remove(); 
      }); 
      $(function() { 
       $("#KUNDE").focus(); 
      }); 
      $(document).keypress(function (e) { 
       if (e.which == 13) { 
        $("#buton").click(); 
       } 
      }); 
      var uri = 'navisioncustomer.json'; 
      function find() { 
       var info = $('#KUNDE').val(); 
       $("#loader").show(); 
       $.getJSON(uri)     
        .done(function (data) { 
         var item = data.filter(function (obj) { 
          return obj.name === info || obj.ID === info; 
         })[0]; 
         if (typeof item !== 'undefined' || item !== null) { 
          $("#list").append("<li>ID  = " + item.ID + "<br />Name = " + item.name + "<br />Phone  = " + item.phone + "<br />Contact  = " + item.contact + "<br />BalanceLCY  = " + item.balanceLCY + "<br /> CreditLimitLCY  = " + item.creditLimitLCY + "</li>"); 
         } 
        })    
          .fail(function (jqXHR, textStatus, err) { 
           $('#KUNDE').text('Error: ' + err); 
          }); 
       $("#loader").hide(); 
      } 
      var options = { 
       url: "navisioncustomer.json", 
       getValue: "name", 
       list: { 
        match: { 
         enabled: true 
        } 
       }, 
       theme: "square" 
      }; 
      $("#KUNDE").easyAutocomplete(options);      
     </script> 

Answer 1

あなたは上の続きを読む、JSONの.alwaysコールバックを使用することができますhttp://api.jquery.com/jquery.getjson/

function find() { 
    var info = $('#KUNDE').val(); 
    $("#loader").show(); 
    $.getJSON(uri)     
     .done(function (data) { 
      var item = data.filter(function (obj) { 
       return obj.name === info || obj.ID === info; 
      })[0]; 
      if (typeof item !== 'undefined' || item !== null) { 
       $("#list").append("<li>ID  = " + item.ID + "<br />Name = " + item.name + "<br />Phone  = " + item.phone + "<br />Contact  = " + item.contact + "<br />BalanceLCY  = " + item.balanceLCY + "<br /> CreditLimitLCY  = " + item.creditLimitLCY + "</li>"); 
      } 
     })    
     .fail(function (jqXHR, textStatus, err) { 
      $('#KUNDE').text('Error: ' + err); 
     }) 
     .always(function() { $("#loader").hide(); }); 
} 

元のコードがshow the loader > make request > hide the loaderと言っていて、コールバックを使用してローダーを非表示にした場合、結果は

Answer 2

ページが読み込まれるときにローダーdivをデフォルトで非表示に設定することができます。

<div id="loader" style="display:none;"><img src="loader.gif"/></div> 

イベントに基づいて必要に応じて、jQueryのではあなたのコードは、その後$("#loader").hide()と$("#loader").show()を扱うことができます。

はまた、あなたのJSPコードで、それは私がJSONデータを印刷するよう <div>