1

I am creating a web application that in a certain moment runs a python script with the exec command in php.

I want to create a progress bar that shows the progress. That python script outputs a json file (it could be txt also) that shows the percentage of the work done.

I would like to transform this value into a progress bar. I found this tutorial and tried to modify it to my purposes but with not so many luck.

http://thupten.veryusefulinfo.com/2011/07/20/progress-bar-to-display-servers-script-execution-using-jqueryjqueryui/

This is the modified version of the js script. I can't figure out why is not working, since I don't know a bit of javascript language. The run.php script only executes the command.

Any help will be appreciated.

<?php 
session_start();
$path = $_SESSION['path'];
Header("content-type: application/x-javascript");

?>

/* 
when the submit button is clicked we will hide the message div. get the input provided by user and start processing. 
*/  
$(document).ready(function(){  

    $("#submit-button").click(function(){  

    /*hide the message div box. since we don't have anything to show at this time.*/  
     $('#message').hide(); 

      /* 
         using ajax we will call the server.php script. dataString is the parameter we got from user.datatype is the data type we expect as return. when complete, set the progress bar to 100% and display the message 'complete'. 
      */ 
      $.ajax( 
        { 
          url : "application/views/pages/run.php", 
          datatype:"json", 
          complete:function(){ 
              $("#progressbar").progressbar({ 
              value:100}); 
              $('#message').html('Complete'); 
              $('#message').show(); 
              } 
        } ); 

    /* 
    call the updateStatus() function every 3 second to update progress bar value. 
    */ 
      t = setTimeout("updateStatus()", 3000); 
    }); 

}); 

/* 
.getJSON will get the json string being updated by the server.php in server. every 3 second, the 'total' and 'current' count will be parsed and updated to the progress bar. 
*/ 
function updateStatus(){ 

          $.getJSON('<?php echo $path;?>/progress.json', function(data){
                               var items = []; 
                               if(data){ 

                                    var progress = data['progress'];  

                                    if(progress>0){  

                                        $("#progressbar").progressbar({  

                                            value:progress  
                                        });  

                                    }  

                                }  
                                if(progress < 100){  

                                   t = setTimeout("updateStatus()", 3000);  

                                }  
          });  

}  
6
  • I know, that's why I didn't tag it as python. It could be a perl script or another CLI. Just need to translate this progress file into a graphical output in a web-browser. Title edited. Commented Mar 14, 2012 at 9:25
  • Fyi, the proper content type for json is application/json Commented Mar 14, 2012 at 9:27
  • Have you tried to check, whether progress.json file is written? By opening it in browser or from console. Are there any js errors in browser? Commented Mar 14, 2012 at 9:28
  • I found that I had to put that header in order to include some php code inside the javascript script. BTW I followed your advice but saw no changes in the bar at all. The php code inside the js still works. Commented Mar 14, 2012 at 9:32
  • @kirilloid. Yes, the progress.json is there and gets updated as the script advances. When I click submit button the bar appears complete and the message says complete. Commented Mar 14, 2012 at 9:34

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.