title: Unable to load Bootstrap Progress Bar Using AJAX with webpy
body: <p>I am running a webpy web application with a template HTML file containing a  Bootstrap progress bar. I want to use jQuery AJAX to update the progress bar with values from the server.</p>
  
  <p>I used setInterval() to make GET requests every second and increment a variable on the server, currentProgress, with a random value with each GET. I pass the currentProgress value into the index.html template variable $percentLoaded.</p>
  
  <p><strong>PROBLEM:</strong> When I run the web page, the value on the server (currentProgress) does update which I can see when I print it to the command prompt. However, the value of $percentLoaded does not update until I refresh the browser, as shown by console.log($percentLoaded).</p>
  
  <p><strong>The result is that the web page will not update without re-loading it. How can I make it so that AJAX will update $percentLoaded so that the progress bar updates without me having to refresh the page?</strong></p>
  
  <p>Note: The eventual goal is to retrieve meaningful values from the server but I am using the "dummy" function getProgressIncrement() as a proxy to get the basics working.</p>
  
  <p><strong>app.py</strong></p>
  
  <pre><code>import web
  import random
  
  urls = (
      '/', 'index'
  )
  
  render = web.template.render('templates/')
  
  app = web.application(urls, globals())
  
  currentProgress = 0
  
  def getProgressIncrement():
      global currentProgress
      currentVal = currentProgress
      remainingProgress = 100 - currentVal
      if currentVal == 100:
          return 0
      elif remainingProgress &lt;= 5:
          return remainingProgress
      else:
          return random.randint(1, 6)
  
  class index:
      def GET(self):
          global currentProgress
          # print currentProgress
          currentProgress += getProgressIncrement()
          return render.index(currentProgress)
  
  if __name__ == "__main__":
      app.run()
  </code></pre>
  
  <p><strong>templates/index.html</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$def with (percentLoaded)
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="progress" id="outerBar"&gt;
      &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%"
          id="myBar"&gt;
          0%
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      // much of this code is from http://elfga.com/articles/bootstrap-progress-bar-update-jqueryajax/
      jQuery(document).ready(function () {
          var progressPump = setInterval(function () {
              /* query the completion percentage from the server */
              jQuery.get("/", function () {
                  // console.log($percentLoaded);
                  /* update the progress bar width */
                  jQuery("#myBar").css('width', $percentLoaded + '%');
                  /* and display the numeric value */
                  jQuery("#myBar").html($percentLoaded + '%');
  
                  /* test to see if the job has completed */
                  if ($percentLoaded &gt; 99.999) {
                      clearInterval(progressPump);
                      jQuery("#outerBar").removeClass("active");
                      jQuery("#myBar").html("Done");
                  }
              })
          }, 1000);
      });
  
  &lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>