Show progress during the loading system

Question

I have a web application.

My application loads a lot of data, and do a lot of manipulations. Therefore, I try view on client-side the processing of the progress of the program. I do like this:

<--Here I want to display the process:-->
<h3 id="progressStatus"></h3>

When the user clicks the button, the program starts.

<input id="openSystem" type="button" onclick="openSystem();"/>

For example I call two main functions:

<script type="text/javascript">

  function openSystem(){
    loadSettings();
    loadParameters();
  }

Before each function begins, I want to change the "progressStatus" to display the current proccess.

  function loadSettings(){
    document.getElementById('progressStatus').innerHTML = 'Please wait. Loading settings...';
    $.ajax...//do something
  }

  function loadParameters(){
    document.getElementById('progressStatus').innerHTML = 'Please wait. Loading parameters...';
    $.ajax...//do something
  }
</script>

But the problem is that it shows only the string of recent function, and is not updating while working.

So my example here, it only shows "Loading parameters" that belongs to recent function, but it ignores the first strings.

What's interesting is that if I write 'alert()' command before, so it writes immediately .. For example here:

  function loadSettings(){
    alert();
    document.getElementById('progressStatus').innerHTML = 'Please wait. Loading settings...';
    $.ajax...//do something
  }

Does someone know how can I write to HTML while working, so that it can be write over and over again to the same place?

Thanks,

Refael

Answer 1

Progress display (pseudocode):

var done = 0;
var jobs_total = 10; // for ex. 10 functions

function DrawProcessBar(text) {
  var process_percent = done * 100 / jobs_total;
  // output like "Finished loading ajax_job2 20%"
  document.getElementById('progressStatus').innerHTML = text + ' ' + Math.floor(process_percent) + '%';
}

function ajax_job1() {
  $.ajax(onSuccess:function(){ done++; DrawProcessBar('Finished loading ajax_job1') });
}
function ajax_job2() {
  $.ajax(onSuccess:function(){ done++; DrawProcessBar('Finished loading ajax_job2') });
}
etc.

Does someone know how can I write to HTML while working, so that it can be write over and over again to the same place?

If you execute all functions in the very same moment there is no point of doing that.

Anyway you can always delay every HTML write with setTimeout to have a nice effect (still pointless:))