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?

See if this helps http://stackoverflow.com/questions/9311986/progress-bar-with-php-ajax — elclanrs, Sep 11 '13 at 08:11

trrrrrrm · Accepted Answer · 2013-09-11T08:20:48.033

6

check Jquery Progress bar UI : http://jqueryui.com/progressbar/
use .getJSON or an ajax call every 10 seconds to call the server and check the progress
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.

edited Sep 11 '13 at 08:20

answered Sep 11 '13 at 08:12

trrrrrrm

11,362
25
85
130

2

Can you explain more to me about step 2? How is the communication between ajax and the server? What data is involved? – Ifan Iqbal Sep 11 '13 at 08:17
I use codeigniter and zend lucene search for indexing. How can the service know about how many rows have been indexed? – Ifan Iqbal Sep 12 '13 at 03:17

score 4 · Answer 2 · answered Sep 11 '13 at 08:16

4

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

answered Sep 11 '13 at 08:16

Marek

7,337
1
22
33

It doesn't matter what kind of progress bar that being used. Thanks for quick response though. – Ifan Iqbal Sep 11 '13 at 08:19

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

2 Answers2

Linked