1

Okay, so, I'm using JQuery to show/hide a 'Processing' div element on my page. Below is the basic code:

function ShowLoading(){
    $(divLoadingPanel).show();
}

function HideLoading(){
    $(divLoadingPanel).hide();
}

Inside of my various Javascript functions I call ShowLoading() and HideLoading() as necessary. When viewing the page in FireFox, everything works correctly. When viewing it in Chrome, the loading panel is never seen. HOWEVER, if I debug and break at the line after the panel should be displayed, it's there. It will display fine when walking the code manually, but not if I don't use a breakpoint and the debugger. That's got me baffled. Here's the code for the div itself:

<div id="divLoadingPanel" class="Loading_Panel" style="display: none">
    <br>
    <img src="./images/8.gif">
    <br><br>
    <font class="Loading_Text">Processing...</font>
</div>

And, finally, here's the class info for the panel:

.Loading_Panel {
    position:fixed;
    top: 50%;
    left: 50%;
    width:300px;
    height:150px;
    margin-top: -75px;
    margin-left: -150px;
    background: #E9F2FA;
    border-radius: 10px;
    border: 1px solid #1C4E7C;
}

Any help would be appreciated.

RGVBaptist
  • 35
  • 5
  • You should be using `$("#divLoadingPanel")`. For why it works in FF, see [here](http://stackoverflow.com/q/3434278/1048572) – Bergi Jun 23 '15 at 19:44
  • I did make the change and appreciate the tip. However, that does not fix my overall problem. The former code actually works when called directly, and will display the div. It even works when called from within another routine....as long as I set a breakpoint and step through the code. However, when processed without a breakpoint it does not display. Something else has to be wrong here. You can see a working sample here: http://www.radonreportingbeta.com/beta20/ – RGVBaptist Jun 23 '15 at 21:05
  • The problem seems to be that you're doing a synchronous XML request and then *immediately* hide the div again, before it could be displayed. Make it asynchronous, use a callback, it'll work. Btw, that doesn't look like test data, and I'm certainly a [third party](http://www.radonreporting.com/Privacy.asp)? – Bergi Jun 23 '15 at 23:00
  • Bergi - that doesn't make any sense. Synchronous means that it has to wait for the response before it continues. Thus, it doesn't move to the next step until the response has been received. I dont *immediately* hide the div either. It's not hidden until the end of the routine, after all of the XML processing has taken place. – RGVBaptist Jun 24 '15 at 12:50
  • Just for argument's sake, I did modify the code today and implement an asynch call. Now it doesn't work on Firefox either. The data is still retrieved and the functionality is intact, but the div is never displayed. – RGVBaptist Jun 24 '15 at 13:05
  • Synchronous means that rendering has to wait after everything is done - the div being shown, the sjax request, and the div being hidden again. – Bergi Jun 24 '15 at 14:36

1 Answers1

0

Change your code to:

 function ShowLoading(){
     $("#divLoadingPanel").show();
 }

 function HideLoading(){
     $("#divLoadingPanel").hide();
 }
brroshan
  • 1,640
  • 17
  • 19
  • Sorry, that didn't fix the problem. Still shows on Firefox, still doesn't show on Chrome. I'll add, that if I add a button to call the ShowLoading() function directly (without doing anything else), the panel will display in Chrome. It just doesn't display when it's run from within the other Javascript routine. I thought maybe it was just too fast, so I lengthened the routine (made it process 1000 records instead of 20). Now that it takes 3-4 seconds it still doesn't display the loading panel. – RGVBaptist Jun 23 '15 at 19:56