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

Question

It used to be easy to find solutions of my problem when Google gives many accurate results that point to Stackoverflow. But, I didn't found one for this problem. If any of you have suggestion where should I go for this problem, please give me link to the answer.

The case is I want to make searching index from database. The indexing process is triggered by jQuery.getJSON. It takes minutes to finish so I want to make progress bar to show that indexing process. I know how to make common ajax request using .getJSON as client side and PHP as server side, but It seems difficult for me to imagine how to make such progress bar.

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

Answer 1

1. check Jquery Progress bar UI : http://jqueryui.com/progressbar/
2. use .getJSON or an ajax call every 10 seconds to call the server and check the progress
3. after you get the server progress update the UI

Explaining Step2

step 2 is generally based on your application flow, lets say for example i'm inserting 100,000 records in MYSQL, i would create another service that will check the rows count and the result were 30,000 records for example, that means the progress now is 30%, so if i call this service every 10 seconds i would get the current progress.

Answer 2

You can output javascript from your long running script:

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

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