0

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.

I am using JQuery Progress Bar UI for the same but its currently showing static progress. The progress bar gets completed but actually the request is still being processed.

How could I change my code to retrieve dynamic status of the task and show it in the progress? Below is my code:

The progress function: 

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 < 99 ) {
    setTimeout( progress, 80 );
  }
}

setTimeout( progress, 2000 );
}

The Ajax call:

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....
            }
        });
}

HTML:

<div id="url_bar"><input id="url" type="text" placeholder="Enter the page URL...." size="10"></div>

<div id="progressbar"><div class="progress-label">Loading...</div></div>
roger_that
  • 8,273
  • 15
  • 56
  • 94
  • 1
    How does the server tell the browser what %-age of the task has been completed so far? The ajax call is async, you'd need some variation of a polling mechanism – blgt Mar 09 '16 at 10:21
  • check here on how setup ajax properly to measure time -- http://stackoverflow.com/questions/20095002/how-to-show-progress-bar-while-loading-using-ajax – Tasos Mar 09 '16 at 10:24
  • @Tasos The linked question is about measuring progress of an AJAX request. This question, as currently worded, is about an underlying (custom) server-side operation – blgt Mar 09 '16 at 10:29
  • @blgt The response from the server of the ajax is not related to status of the task. The request creates few images and response is the directory path for those images. Now, as the images are being created, I need to update the status client side. – roger_that Mar 09 '16 at 10:47
  • Again, you need a way for the server to communicate to the browser about its progress. This isn't really a jqueryui question. Some kind of polling is the simplest way to go but it may or may not be suited to your use case - not enough info here to say. There's a question listing polls: http://stackoverflow.com/questions/12555043/my-understanding-of-http-polling-long-polling-http-streaming-and-websockets – blgt Mar 09 '16 at 11:13
  • well use ajax and check if the images are created. you will need an interval function too – Tasos Mar 09 '16 at 12:01
  • ill give you the approach. 1st ajax --> send directory and how many images are created. -- > divide 100% by number of images (this is the step) -->2nd ajax call inside an interval function --> checks how many files are in the directory and updates the step in progress --< when all files in directory = to the number of files created cancel the interval function – Tasos Mar 09 '16 at 12:07

0 Answers0