CODEWITHSUNDEEP
javascriptjqueryprogress
indianwebdevil
indianwebdevil

Reputation: 5127

Show "In Progress" during http request (long running) execution in javascript/jquery/php

I would like to have "Loading.." / "In Progress.." message during regular http request. This should be shown only during the http request cycle, and once you get the request is completed and you get the response, it should go off. I am keen about regular HTTP Request, and HTTP Request that take longer time and not AJAX. Code blocks, examples, pointers appreciated. Here is one approach, I would like to have common approach, so that it can be used for any http request.

Upvotes: 0

Views: 2255

Answers (4)

gdoumenc
gdoumenc

Reputation: 599

I think it is not possible to render any information during pure javascript HTTPRequest synchronous call (not the case in JQuery). If you change a style, class.. just before calling the send method, this info will not be rendered.

To fix this issue, I changed call to asynchronous call, then the style, class .. changes can be rendered before the call returns (using onreadystatechange to get the result and reset style)

Upvotes: 0

jd_7
jd_7

Reputation: 1862

You should use beforeSend and complete events:

$.ajax({
   ...
   beforeSend: function(){
      //Here you loading SHOW

   },
   complete: function(){
     //Here you loading HIDE

   }
   ...
});

Upvotes: 1

lamplightdev
lamplightdev

Reputation: 2081

You could have an element on the page that gets hidden once the page has been fully loaded. E.g.:

<img id="loading" src="loading.gif" alt="Loading..." />

<script type="text/javascript">

$(function() {
  $('img#loading').hide(); // Called when whole page has been loaded
});

</script>

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038930

Basically when executing a normal HTTP request (not AJAX), the client browser already provides a progress indicator. This indicator will vary between browsers and platforms and you cannot rely act on it.

Your javascript stops working once you navigate away from the page so don't look for a javascript solution to show such progress indicator. Depending on how this HTTP request is triggered there might be different ways to achieve that. For example if you have an anchor tag in your markup that triggers a normal HTTP request, you could subscribe to the click handler of this anchor and show an animated spinner using javascript and then let the browser do the redirect.

And as far as AJAX requests are concerned you could subscribe to the .ajaxStart() and .ajaxComplete() global handlers to respectively show and hide some spinner.

Of course everything will depend on the implementation. There's no magic solution that will handle all the possible cases. So basically you will have to find a solution that's adapted to your specific context which unfortunately you haven't detailed.

Upvotes: 0

Related Questions