Progress bar is not showing immediately during ajax call

Question

My Requirement:

1. Click on Submit button and hit Ajax call
2. Show progress Bar
3. Once Ajax call is done Hide progressbar
4. Show Extjs.Message.alert(Ajax result) with Ajax result

Problem is When I click on submit button it executes below code but doesn't show progress bar immediately and also progress bar is hiding simultaneously with Extjs Message Alert box

function submit() {

  jQuery("#myProgressBar").show();
  Ext.Message.Alert(doAjaxCall());
}



function doAjaxCall() {
  var ajaxResult = null;
  jQuery.ajax({
    url: someUrl,
    data: someData,

    success: function(result) {
      task.delay(1000);

      ajaxResult = result;
    }


  });
  return ajaxResult;
}

If I use below piece of code then only it is showing progress bar otherwise it is not showing progress bar

var task= new Ext.util.DelayedTask(function() {
  jQuery("#myProgressBar").hide();
});

and task.delay(1000); in Ajax call success part

Answer 1

try this

function submit() {
  jQuery("#myProgressBar").show();
  doAjaxCall(aftersuccess);
}

function doAjaxCall(callback) {
  var ajaxResult = null;
  jQuery.ajax({
    url: someUrl,
    data: someData,

    success: function(result) {
     callback(result);
    }


  });
return result;
}

function  aftersuccess(data){
 jQuery("#myProgressBar").hide();
alert(data);
}