Create a progress bar when calling $ .ajax

Question

I want to display a progress bar when I click a button to download content via ajax. As soon as I make a call to $.ajax , the connection goes to the php file on the server, which dumps data from another file on the server. And it takes 7-8 seconds to get the data.

I want to display a progress loader while creating an ajax request. I looked on the Internet and could not find a simple solution. All I could find were complex file upload scripts that were badly damaged to set up this simple operation. If anyone can help, that will be great. Otherwise, I would have to do with a spinner.

Answer 1

Since all the other answers concern only the image or text of the placeholder, or just pretending it, here is how you could do it (just a description, no code), but the only difficult part is to determine what part of the work is really done):

Edit the php script that you call through $.ajax to calculate the percentage of work done - how you do it very much depends on what the script is doing and, as such, can be extremely simple (for example, when you just iterate over an array things to process, each of which takes about the same time) or extremely difficult (for example, when most of the time is spent in one single non-repeating library call or built-in function). Store this percentage in the session variable:

 $_SESSION["PERCENTAGE_DONE"] = $my_calculated_percentage; 

Obviously, you want to update this variable as often as possible and reasonably.

Now create another php script that just prints this value (plain text is enough for this example, but you can also use json or xml or some other format you like):

 //initialize session, set headers etc. before this echo $_SESSION["PERCENTAGE_DONE"] 

For the javascript part, create another function that calls a new php script via ajax, reads the return value and draws / updates a progress bar (for the part of the drawing, you can take JustinJohns as a starting point). Now, after making the main call to $.ajax , use this function with setTimeout to request the server several times until the task is completed.

Answer 2

Please try to execute the script for the Ajax progress bar:

 <script> function submit_form_data(){ $("#preview").html(''); $("#preview").html('<img src="loader.gif" alt="Uploading...."/> <br><p>Please wait for response.............</p>'); $.post('getdata.php',function(data){$("#preview").html(data)}) } </script> <div id='preview'></div> 

Answer 3

The main problem is that you do not know how long the request will take.

It will be an offer, not an answer.

I assumed that the time would be about 7-8 seconds.

Make progress by downloading 10 percent every second to reach 90 percent.

After you wait for your ajax request to complete and make a bandwidth of 100 percent on successful ajax callback.

You can adjust over time to load a percentage of the bar.

Please check this demo.

Answer 4

The image you used should load the animation image.

 <div id="loading" > <p> <img src="images/loading.gif"> Please Wait </p> </div> 

Then in the script function use the following code

 <script type='text/javascript'> function showLoading() { $("#loading").show(); } function hideLoading() { $("#loading").hide(); } </script> 

Then call the showLoading and hideLoading function, which you need to call ajax. It will display and hide the animation.

Answer 5

As you asked for a simple solution, this may help you .. You have a div with the identifier “loading” with the display as hidden.

 <div id='loading' style='display:none;'><img src='loading.gif' /></div> 

When calling an ajax request, display a div

 $('#loading').show(); 

When the answer is successful, hide the div again,

 $('#loading').hide();