jQueryUI progressbar implementation

In one of my projects, I needed to implement progressbar. I took jQueryUI library, as it provides pretty good bunch of solutions to make your UI more interactive for a user. Progressbar implementation is described here.

For my task, I used the following html:

Link will trigger DB operation and Progressbar. Progressbar will be displayed in div#progressbar.
Here is javascript code for this implemetation:

AS you see, for this purpose, we need two additional files db_operation.php and progress_track.php.
If you execute some loop in db_operation.php, then just add mechanism for delivering progress status to progress_track.php.

I will show simple example how this can be implemented in db_operation.php

NB: you can use session to store progressbar status, but be aware, that PHP has certain limitations on writing to session from more than two files. Take care of it, during implementation, or use mine.

progress_track.php file will only read from tracking file and report to javascipt.

That’s it. You will get nice progressbar, which will show the progress of your operation.