title: Update progress bar without refreshing page
body: <p>I have two php pages. page.php and loader.php. Loader.php pulls data from mysql to fill a progress bar and page.php contains a function to refresh loader.php every second. It works but it's rather ugly because you can see the css animation resetting every second.</p>
  <p>I would prefer having the loading bar html in page.php along with all the other html for my page but A) how do I get the vars from loader.php into page.php and B) how do I update the div (or any object) on page.php without refreshing the page?</p>
  <p>I looked into AJAX which seems like it can do what I want but I'm new to AJAX and programming in general. I'm already proud it is (somewhat) working to begin with.</p>
  <p>page.php</p>
  <pre><code>&lt;script&gt;
  var myTimer = null;
  
  //executes a script that fills mysql with data
  function fileExec() {
          $.ajax({
              url:&quot;fileexec.php&quot;,
              type: &quot;post&quot;
          });
      startRefresh();
  }
  
  //Shows progress bar
  function refreshData() {
    $('#container').load('loader.php');
  }
  
  function stopRefresh() {
    clearInterval(myTimer);
  }
  
  function startRefresh() {
   myTimer = setInterval(refreshData, 1000);
  }
  
  &lt;/script&gt;
  </code></pre>
  <p>loader.php</p>
  <pre><code>&lt;?php
  //Code not shown sets up connection to mysql to pull progress
  $progress1 = $row['progress'];
  $script1 = $row['script'];
  
  //Stop refresh after shell script has finished
  if ($script1 == &quot;stop&quot;) {
      echo &quot;&lt;script&gt;&quot;;
      echo &quot;stopRefresh();&quot;;
      echo &quot;&lt;/script&gt;&quot;;
  }
  ?&gt;
  
  //Update progress bar with variable
  &lt;html&gt;
    &lt;body&gt;
      &lt;div class=&quot;progress-bar-wrapper&quot;&gt;
          &lt;div class=&quot;progress-bar&quot;&gt;
              &lt;div id=&quot;myBar&quot; class=&quot;progress-bar-fill in-progress&quot; style=&quot;height:10px;width:&lt;?php echo $progress1; ?&gt;%&quot;&gt;&lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>