Getting progress of PHP script called by jQuery post

Getting progress of PHP script called by jQuery post

I want to periodically check the status of a php script and display it on the browser. Here is the jQuery that is used to post.

    $(document).ready(function() {
          $("#tempbut").click(function(event){
               $('#loader').show();
               $('#mainarea').hide('fast');
    
              $.post(
               "template.php",
               {
                    guide : $('#guide').val(),
                    title : $('#title').val()
               },
                function(data) {
                    $('#mainarea').empty();
                    $('#loader').fadeOut('slow');
                    $('#mainarea').append(data);
                    $('#mainarea').show('slow');
                 }
    
              );
          });
       });

In the PHP Script (not posted), I echo statements such as "Building request...", "Sending request..." to inform the user of the progress. If I were not using jQuery post, I would be able to show the status using flush() and obflush() after every echo. Perhaps it is because the callback waits for the script to fully execute before outputting?

Thanks!  

Looked into an implementation found at but had no luck.:

The script would output 9

Below is the code:

**progress.php**

    <?php
    
    session_start();
    
    echo $_SESSION['status'];
    flush();
    ob_flush();
    
    
    ?>

**process.php**

  1.     <?php
  2.     session_start();
  3.     
  4.     for($i = 0; $i<10; $i++){
  5.      $_SESSION['status'] = $i;
  6.      sleep(1);
  7.     }
  8.     
  9.     
  10.     ?>

**index.php:**

  1.  <!doctype html>
  2.     <html lang="en">
  3.     <head>
  4.       <meta charset="utf-8">
  5.       <title>jQuery.post demo</title>
  6.       <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  7.     </head>
  8.     <body>
  9.      
  10.     <form action="process.php" id="searchForm">
  11.       <input type="text" name="s" placeholder="Search...">
  12.       <input type="submit" value="Search">
  13.     </form>
  14.     
  15.     <div id="result"></div>
  16.      
  17.     <script>
  18.     
  19.     $("#searchForm").submit(function startProcess(event) {
  20.      event.preventDefault();
  21.     
  22.         //start your long-running process
  23.         $.ajax(
  24.                 {
  25.                     type: 'GET',
  26.                     url: "process.php",
  27.                     async: true,
  28.                     success:
  29.                         function (data) {
  30.                             //do something - your long process is finished
  31.                         }
  32.                 });
  33.     });
  34.     $("#searchForm").submit(function getStatus(event) {
  35.      event.preventDefault();
  36.     
  37.         //check your progress
  38.         $.ajax(
  39.                 {
  40.                     type: 'GET',
  41.                     url: "progress.php",
  42.                     async: true,
  43.                     success:
  44.                         function (data) {
  45.                             //assume the data returned in the percentage complete
  46.                             var percentage = parseInt(data);
  47.     
  48.                             //write your status somewhere, like a jQuery progress bar?
  49.      $("#result").html(data);
  50.                             if (percentage < 8) {
  51.                                 //if not complete, check again
  52.                                 getStatus();
  53.                             }
  54.                         }
  55.                 });
  56.     });
  57.     
  58.     </script>
  59.      
  60.     </body>
  61.     </html>