Progress bar problem in IE with on demand application call

Question

I have several on demand application processes that I call from javascript. The application processes in turn call pl/sql procedures. Some of the procedures take up to 10 seconds to complete and while they are running, the screen just appears to freeze so the user does not know that they are actually running. I would therefore like to add some kind of a progress bar or hourglass or some indication that things are happening.
So I found the instructions in Re: Display of Hourglass When Page is processing . This works great in Firefox, but not in IE.
My Footer text:
<style> #AjaxLoading{padding:5px;font-size:18px;width:200px;text-align:center;left:50%;top:20%;position:absolute;border:2px solid #666;background-color:#FFF;}
</style>
<div id="AjaxLoading" style="display:none;">..Processing..
<img src="#IMAGE_PREFIX#processing3.gif" id="wait" />
</div>
My javascript:
function create_invoice(pMilestoneNumber){
var agree=confirm("Are you sure you want to bill this Invoice?");
var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=P110_CREATE_INVOICE',$v('pFlowStepId'));
if (!agree)
     return;
html_ShowElement('AjaxLoading');
get.addParam('x01',pMilestoneNumber);
gReturn = get.get();
alert(gReturn);
get = null;
doSubmit();
In Firefox, the Progress bar appears immediately after the user clicks ok to the confirm request. In IE, it does not appear until the application process returns with the return message.
Any help would be greatly appreciated.

Answer 1

Thanks for your reply. You are right, part of the code got stripped off, I guess I failed to use the code brackets before and after. Here is is again using the code brackets:
Javascript:
<script language="JavaScript" type="text/javascript">
function create_invoice(pMilestoneNumber){
var agree=confirm("Are you sure you want to bill this Milestone?");
var get = new
htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=P110_CREATE_INVOICE',$v('pFlowStepId'));
if (!agree)
     return;
html_ShowElement('AjaxLoading');
get.addParam('x01',pMilestoneNumber);
gReturn = get.get();
alert(gReturn);
get = null;
doSubmit();
</script>Footer:
<style>   #AjaxLoading{padding:5px;font-size:18px;width:200px;text-align:center;left:50%;top:20%;position:absolute;border:2px solid #666;background-color:#FFF;} 
</style> 
<div id="AjaxLoading" style="display:none;">..Processing..<br /><img src="#IMAGE_PREFIX#processing3.gif" id="wait" />
</div>I was using IE8, but I found an another computer with IE7 and I have the same problem there.
My javascript code throws up a confirm message and as soon as a hit ok, Firefox brings up the progress bar and it stays up until the alert message comes back with the return from the application process. Just the way I want it. In IE, the screen just freezes after I hit ok (the same way as if you don't have a progress bar at all), but then when the alert message comes up with the return from the application process, the progress bar comes up (a little late....).
Do you have any suggestion as to what my problem may be?