title: How to change progress bar status dynamically?
body: <p>I want to show progress status for my ajax call to client page and that too dynamically as in a real time progress of the task. The task is big and does a lot of processing so its better to display %age status to the waiting user.</p>
  
  <p>I am using <a href="http://jqueryui.com/progressbar/#label" rel="nofollow">JQuery Progress Bar UI</a> for the same but its currently showing static progress. The progress bar gets completed but actually the request is still being processed. </p>
  
  <p>How could I change my code to retrieve dynamic status of the task and show it in the progress? Below is my code:</p>
  
  <p>The progress function: </p>
  
  <pre><code>function progress() {
  var progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" );
  
  progressbar.progressbar({
    value: false,
    change: function() {
      progressLabel.text( progressbar.progressbar( "value" ) + "%" );
    },
    complete: function() {
      progressLabel.text( "Complete!" );
    }
  });
  
  function progress() {
    var val = progressbar.progressbar( "value" ) || 0;
  
    progressbar.progressbar( "value", val + 2 );
  
    if ( val &lt; 99 ) {
      setTimeout( progress, 80 );
    }
  }
  
  setTimeout( progress, 2000 );
  }
  </code></pre>
  
  <p>The Ajax call:</p>
  
  <pre><code>function loadAjax() {
  
  progress();
  var urlValue = document.getElementById("url").value;
  
  $.ajax({
      type : "GET",
      url : "/prismweb/testSinglePage?url="+urlValue,
      success : function(response) {
  
                  $("#progressbar").hide();
                 //more code goes here....
              }
          });
  }   
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="url_bar"&gt;&lt;input id="url" type="text" placeholder="Enter the page URL...." size="10"&gt;&lt;/div&gt;
  
  &lt;div id="progressbar"&gt;&lt;div class="progress-label"&gt;Loading...&lt;/div&gt;&lt;/div&gt;
  </code></pre>