IE Hanging on Javascript event...

[lukestedman]

Hey guys,

I have been suffering a small issue with Javascript on IE.

When a user clicks a button on the screen I want a loading screen to appear, I have created the loading screen as a loading foreground/background div which start out with the style “display:none;”, when the use clicks the button I use the Javascript to set the display to “display:block;”.

In Firefox it works fine, in IE the loading page does not appear but all of the other Javascript is executed correctly, i.e. content is retrieved and displayed.

I have tried them in the same block, I have tried them as separate functions, I have changed the event from onClick to onMouseDown, onMouseUp, etc…, but no joy.

The only time I can get it work is when there is an error and the debugger window appears or if I insert “alert()” statements within the section of code that is setting the loading screen, e.g….

Doesn’t Work

  function loading(){
    aBackground = getElementsByClassName("load-bg")
    aForeground = getElementsByClassName("load-fg")
    aBackground[0].style.display = "block";
    aForeground[0].style.display = "block";
   }

Works (albeit with alert messages getting in the way)

  function loading(){
    aBackground = getElementsByClassName("load-bg")
    alert(“Here I am...”);
    aForeground = getElementsByClassName("load-fg")
    alert(“...again on my own...”);
    aBackground[0].style.display = "block";
    alert(“...going down the only road...”);
    aForeground[0].style.display = "block";
    alert(“...I’ve ever known.”);
   }

What I have noticed is that when the user actually clicks the button IE appears to hang for as long as it takes the XMLHttp request to go to the server and retrieve the information, if a debugger window or alert box appears then it seems to get out of this hanging state.

Is frustrating, any help is greatly appreciated.

Luke

 

[BillyRayPreachersSon]

Show your window, then fire a short timer (say, 500 msecs). After the timer fires, then do your AJAX.

You might find you can reduce the timer to a smaller value, e.g. 100 msecs.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[lukestedman]

Thanks Dan, that appears to have worked.

For completeness this is the change I have made to the Javascript:

function startBtnClick(){
    loading(); // Display the Loading screen
    // Wait 100 milliseconds and then start populating the data.
    // The code to clear the loading screen is at the end of the populateData() function.
    setTimeout("populateData()", 100); 
    return false;
}

The only minor issue I have now is that the loading gif hangs in IE...minor problem, not essential.

Thanks again
Luke