jquery post成功のメッセージが表示されます。

Question

フォームパラメータに基づいてサーバからデータを取得するスクリプトがあります。

jQuery('#request_search').submit(function(e){ 
    e.preventDefault(); 


     var s_date=jQuery('#actualfrom').val(); 
     var e_date=jQuery('#actualto').val(); 
     var type=jQuery("#type").val(); 
     var loc=jQuery("#loc").val(); 



jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type}, function(data) { 

jQuery('#report').html(data);}); 


     }); 



}); 

この部分は動作しており、検索条件に基づいて何度かの結果が得られます。その間、データの読み込みを指示するGIFをいくつか表示したいと思います。私はGIFを準備しました。どのように上記のスクリプトでそれを実装するには？

Answer 1

これを試してみてください。

jQuery('#request_search').submit(function(e){ 

     $("#report").html("<div><img src='loading.gif' alt='Loading.. \n Please wait' title='Loading.. \n Please wait'` /></div>"); 
    e.preventDefault(); 


     var s_date=jQuery('#actualfrom').val(); 
     var e_date=jQuery('#actualto').val(); 
     var type=jQuery("#type").val(); 
     var loc=jQuery("#loc").val(); 



jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type}, function(data) { 

jQuery('#report').html(data);}); 
     }); 
}); 

Answer 2

はID属性を使用してHTMLファイルにパスで画像を追加して、要求と成功に基づいて/非表示のdivの を示しました。

コードの下に試してみてください：jQueryののコードの下

<div id='loadingmessage' style='display:none'> 
    <img src='loadinggraphic.gif'/> 
    </div> 

は試してみてください：

はあなたHTMLファイルにHTMLのdivを追加

jQuery('#request_search').submit(function(e){ 


$('#loadingmessage').show(); // show the loading message. 
    e.preventDefault(); 


     var s_date=jQuery('#actualfrom').val(); 
     var e_date=jQuery('#actualto').val(); 
     var type=jQuery("#type").val(); 
     var loc=jQuery("#loc").val(); 



jQuery.post("scripts/get_gamma_activity_type.php", {"loc":loc,"start_date":s_date, "end_date":e_date, "type":type}, function(data) { 

jQuery('#report').html(data);}); 
    $('#loadingmessage').hide(); // hide the loading message 
     }); 
});