ドロップダウン変更イベント（SelectedIndexChange）の画像の読み込み方法

Question

私のページにドロップダウンとグリッドがあります。ドロップダウン値を変更すると、グリッドがリフレッシュされます。グリッドにバインドされているデータがデータベースからフェッチされます。私はドロップダウンの値を変更する私は自分の画面上に画像を読み込むことができるはずです。データがロードされた後、ロードイメージが消えるはずです。 提案が役に立ちます。

以下は、私がクリック送信に使用したコードです。ドロップダウン変更イベントで動作するように変更するにはどうすればよいですか。

<script type="text/javascript"> 
    function ShowProgress() { 

      setTimeout(function() { 

       var modal = $('<div />'); 
       modal.addClass("modal"); 
       $('body').append(modal); 
       var loading = $(".loading"); 
       loading.show(); 
       var top = Math.max($(window).height()/2 - loading[0].offsetHeight/2, 0); 
       var left = Math.max($(window).width()/2 - loading[0].offsetWidth/2, 0); 
       loading.css({ top: top, left: left }); 
      }, 200); 
     } 

$('form').live("submit", function() { 
    ShowProgress(); 
}); 

Answer 1

あなたは、もちろん、要求を行う前に、それを表示し、それが完了した後にそれを隠すことができます。

HTML：

<div id='loading-image'> 
    <img src='loadinggraphic.gif'/> 
</div> 

スクリプト：

$('#loading-image').show(); 
$.ajax({ 
     url: 'data.php', 
     cache: false, 
     success: function(data){ 
     $('.info').html(data); 
     }, 
     complete: function(){ 
     $('#loading-image').hide(); 
     } 
    }); 

ここにdata.phpでは、ロジックを入れてdatabaseからデータを取得できます。

が、私は通常、グローバルajaxStartとajaxStopイベントにバインドするより一般的な解決策を好む、その方法は、それはすべてのAJAXのイベント用に示しています

$('#loading-image').bind('ajaxStart', function(){ 
    $(this).show(); 
}).bind('ajaxStop', function(){ 
    $(this).hide(); 
});