2016-09-13 5 views
1

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

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

答えて

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と言っていて、コールバックを使用してローダーを非表示にした場合、結果は

+0

<di>ないが、今loader.gifは、すぐに姿を消し、そのように見えます。どんな継承もありますか?検索ボタンをクリックするとどのように起動できますか?ページが読み込まれるとすぐにloader.gifが表示されます。ありがとうございました。 –

+0

上記のコードは 'find()'を 'function()'の中にラップしているので 'find()'を呼び出すときに '$("#loader ")。したがって、ページの読み込みの直後に表示されている場合は、ページロード時に '.show()'や 'find()'を実行しなければなりません。あるいは、初期状態で '#loader'を隠さなかったはずです。 '#loader {display:none;}を追加してみてください。 } 'あなたのCSSに何が間違っているかを確認するために –

1

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

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

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

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

+0

ありがとうございました。これは私にとっても非常に便利でした。 –