title: Display progress of running process in modal window
body: <p>I'm currently trying to make a webpage look a bit more modern, but I'm having a bit of trouble adding some relatively simple functionality to a modal window.</p>
  
  <p>On my webpage, a user first uploads a file, then on hitting submit the file gets processed by a shell script (which can take from seconds to minutes depending on the file size).</p>
  
  <p>What I had been doing to show the process status was execute the following bit of code using php:</p>
  
  <pre><code>$cmd = "script.bash -i $input_file";
  
  $PID = shell_exec($cmd . " &gt;&gt; $log 2&gt;&amp;1  &amp; echo $!");
  
  while(is_process_running($PID)){
     echo(" . ");
     ob_flush(); flush();
     sleep(3);
  }
  </code></pre>
  
  <p>In addition to some other information that gets displayed (not shown), this would simply print out a "." every few seconds to give the user an indication that the process was running. On completion, a download link would appear so that the processed data could be retrieved.</p>
  
  <p>What I would like to do now is load this information in a modal window. I have no trouble creating the modal window (using boostrap and javascript) and adding download functionality to it, but I can only do this once the $cmd executed via php is complete. What I would like to do is execute the $cmd, load the modal window, then query the process status and display some sort of indicator in the modal window, and finally create the download link when the process is complete. I believe this needs to be done via AJAX, but I'm a bit confused on how to do this. Here is my code in a bit more detail:</p>
  
  <pre><code>&lt;?
      if($theaction == "run_script" and !$error_msg){
          $cmd = "script.bash -i $input_file";
  
          $PID = shell_exec($cmd . " &gt;&gt; $log 2&gt;&amp;1  &amp; echo $!");
  
          while(is_process_running($PID)){ #ensure the process is compete before loading the html
              echo("");
              ob_flush(); flush();
              sleep(3);
          }
  
          echo "
              &lt;script type=\"text/javascript\"&gt;
                  $(function() { $(\"#myModalProcess\").modal('show') })
              &lt;/script&gt;
  
  
              &lt;div class=\"modal fade\" id=\"myModalProcess\" tabinex=\"-1\" role=\"dialog\" aria-hidden=\"true\"&gt;
                  &lt;div class=\"modal-dialog\"&gt;
                      &lt;div class=\"modal-content\"&gt;
                          &lt;div class=\"modal-header\"&gt;
                              &lt;h4&gt;&lt;b&gt;Process ID: $PID&lt;/b&gt;&lt;/h4&gt;
                              &lt;hr&gt;
                              &lt;p&gt;Other stuff here&lt;/p&gt;
                              &lt;a type=\"button\" class=\"btn btn-primary\" href='".$_SERVER['PHP_SELF']."?theaction=download&amp;workDir=$workDir&amp;out_folder=$out_folder'&gt;Download Results&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          ";
      }
  ?&gt;
  </code></pre>