Ebikeneser Ebikeneser - 7 months ago 63
Javascript Question

Loader not working in IE

I am working with an ajax loader gif that I am trying to show when a user clicks a button (while waiting for the response the gif is shown).

Everything works fine in Chrome and FireFox however when it comes to testing on IE it breaks.

Html

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="ShowLoading()"/>

<div id="blockScreen" class="blockScreen" style="display:none; width:100%; text-align:center;" >&nbsp;</div>
<img src="Images/ajax_loader.gif" style="display: none;"/>


javScript

function ShowLoading() {

var divBg = document.getElementById('blockScreen');
var divLoad = document.createElement('div');
var img = document.createElement('img');

img.src = 'Images/ajax_loader.gif';
img.height = 100;
img.width = 100;
divLoad.setAttribute("class", "blockScreenLoader");
divLoad.appendChild(img);

divBg.appendChild(divLoad);


if (document.getElementById('MainContent_gridDiv') != null) {
document.getElementById('MainContent_gridDiv').style.display = 'none';

}

document.getElementById('blockScreen').style.display = 'block';

}


Error


Error: The value of the property 'ShowLoading' is null or undefined,
not a Function object


I have tried stripping the code down to the bare minimum however still the error persists. Why is this happening in IE?

Answer

I'm guessing you have the script block at the bottom of your html and this is means that the function does not exist when the onclick attribute is parsed. Here is an example that works in IE (tested with IE11) http://jsfiddle.net/T5aEn/

Note that if you change the location if the script block to something like "ondomready" then you get the undefined function error.

<head>
    <script>
    function ShowLoading() {
        ...
    }
    </script>
</head>
<body>
     <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="ShowLoading()"/>

     <div id="blockScreen" class="blockScreen" style="display:none; width:100%; text-align:center;" >&nbsp;</div>
     <img src="Images/ajax_loader.gif" style="display: none;"/>
</body>