Javascript behaviour difference between IE and Mozilla Firefox?

Question

I have the following code which should update a label to say "please wait..", then run a function, and then update the label again to say it has completed:

<asp:Button ID="Button1" runat="server" Text="Upload"
                    onclientclick="document.getElementById('errorMessage').innerText='Please Wait...';" 
                    onclick="Button1_Click"  />

This works fine in IE, but not in Firefox.

When I run it in Firefox the label does not change until the process completes.

Is there a way to force the javascript to update the page before running the C# function?

Answer 1

The innerText property is a proprietary Internet Explorer feature. In Firefox and other DOM compatible browsers, use textContent(link).

The following code will test to see which property is supported by the browser and use the appropriate one:

var node = document.getElementById('errorMessage');
var errorMessage = 'Please Wait...';
if (typeof node.innerText !== 'undefined')
  node.innerText = errorMessage;
else
  node.textContent = errorMessage;

If your site will involve a lot of JavaScript, I strongly recommend using a 3rd-party library such as jQuery that takes care of these browser incompatibilities for you.

Answer 2

Unfortunately, the behavior of JavaScript does very in some details across different browsers. Here's my suggestion: use jQuery.

The experts at jQuery have done tremendous work to smooth over these differences, and many other pitfalls besides.

Answer 3

onclientclick and innerText are not standard DOM attributes. Use onclick and textContent or innerHTML. Or better yet, use jQuery:

$('#Button1').click(function() {
    $('#errorMessage').text('Please Wait...');
});

Answer 4

Why don't you try:

document.getElementById('errorMessage').innerHTML = 'Please Wait...'

And to avoid putting different code in different browsers, i'd suggest you to use jQuery.

$('#errorMessage').html('Please Wait...');

Answer 5

If you want to do it with standard DOM methods rather the non-standard (and subtly different) innerText and textContent properties:

var el = document.getElementById('errorMessage');
while (el.firstChild) {
    el.removeChild(el.firstChild);
}
el.appendChild( document.createTextNode('Please Wait...') );

Obviously this is quite verbose, and is likely to be slower than the innerHTML alternative.