How to make a progress bar with jQuery and PHP while waiting for a server process?

Question

It used to be easy to find solutions to my problem when Google gives a lot of accurate results pointing to Stackoverflow. But I did not find this for this problem. If any of you have a suggestion where I should go on this issue, please give me a link to the answer.

The thing is, I want to make a search index from a database. The indexing process is started by jQuery.getJSON . It takes a few minutes to complete this indexing process so I want to make a progress bar. I know how to make a general ajax request using .getJSON as the client side and PHP as the server side, but it seems difficult for me to imagine how to make such a progress bar.

Is there any body that can explain to me how to do this?

Answer 1

• check out jQuery progress bar UI: http://jqueryui.com/progressbar/
• use .getJSON or ajax call every 10 seconds to call the server and check the progress.
• After you receive the server update, the user interface

Explanatory Step 2

step 2 is usually based on the flow of your application, say, for example, I insert 100,000 records into MYSQL, I would create another service that will check the number of rows, and the result will be 30,000 records, which means progress is now 30% therefore, if I call this service every 10 seconds, I will get the current progress.

Answer 2

You can infer javascript from your long script:

 while(doThings()) { echo ' <script> updateProgress("' . $x .'%");</script>'; flush(); } 

I personally use bootstrap: http://getbootstrap.com/components/#progress