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:

reload balance

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

$("a#refreshDB").click(function(){
       /* start DB operation */
       $.ajax({
             url: "/lib/helpers/db_operation.php",
             async: true,
             dataType: 'json'
       });
       /* hide link to prevent repeated click */
       $(this).hide();
       /* initial value for progressbar */
       var progressvalue = 0;
       /* every 2 seconds progress status will be obtained */
       var myInterval = setInterval(function(){
             /* get progress status */
             $.getJSON('/lib/helpers/progress_track.php', function(data) {
                /* update jQueryUI progressbar */
                $( "#progressbar" ).progressbar({
                            value: data,
                /* onComplete actions */
                complete: function(event, ui) {
                    /* close progressbar */
                    $( this ).progressbar( "destroy" );
                    /* reset interval */
                    clearInterval(myInterval);
                    /* show the link again */
                    $("a#refreshDB").show();
                }

                });
             });
    /* 2 seconds*/
    }, 2000);
        /* prevent from page reload */
        return false;
    });

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

/* tracking file */
$myFile = $_SERVER['DOCUMENT_ROOT']."/temp/testFile.txt";
$fh = fopen($myFile, 'r');
/* get current value - needed for preventing from repeated execution */
$theData = fread($fh, 5);
fclose($fh);

if (!$theData || $theData == 100):
for ($i=0;$i<=100;$i++)
{
   sleep(1);
   /* round to the lowest value */
   $progress_status = floor($i/100*100);
   /* write new value to file */
   $fh = fopen($myFile, 'w') or die("can't open file");
   fwrite($fh, $progress_status);
   fclose($fh);
}
else:
print 'Another process is running';
endif;

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.

$myFile = $_SERVER['DOCUMENT_ROOT']."/temp/testFile.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, 5);
fclose($fh);
print $theData;

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

5 comments

  1. Randani,
    What exactly didn’t work for you?
    There might be some tricks with temp file – it should writable for Apache user.

  2. With this implementation, when I’m making that call to the database, I need to pull from a ‘Que’ table to get the users next que’d skill to see how much time that will take and refresh the timer.

    So I need to do a loop I take it for $theData to return a % of what now() is compared to $Que_Skill_Finish_Time is?

Leave a Reply

%d bloggers like this: