CODEWITHSUNDEEP
phpjquery
mansoondreamz
mansoondreamz

Reputation: 493

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?

Upvotes: 2

Views: 239

Answers (2)

Manthan Dave
Manthan Dave

Reputation: 2147

Add Image with path in your html file with id attribute and then show/hide div based on request and success.

Try below code:

Add html div in your html file :

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

Try below code of jQuery:

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

Upvotes: 0

Pranav MS
Pranav MS

Reputation: 2296

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

Upvotes: 1

Related Questions