mansoondreamz mansoondreamz - 1 month ago 17
jQuery Question

jquery post Showing loading message till success

I have following script which fetch data from server based on form parameters.

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);});


});



});


This part is working and some times, based on search criteria , it takes a couple of seconds to get results. in the mean time I would like to show some GIF saying data loading. I have the GIF ready. How to implement it in the above script?

Answer

please try this.

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);});
         });
});