Guide lines for Browser indepednace.

JavaScript, JQuery and Leading Browsers– behavioural differences

Published November 26, 2011 | By Peter Scargill

Second decade of the 21st century and the browser manufacturers STILL can’t agree on standards.

Here’s a simple piece of coding – almost too simple – it uses the JQUERY library (not shown) to simplify cross-browser coding.

<script language=”javascript”>
function alertMsg()
{
    var gm=”/admin/ajax_keepalive.asp”;
    $.get( gm, function(data) { $(“#myTimer”).html(data); } );
    var t=setTimeout(alertMsg,10000);

}
alertMsg(); </script> 

This simple piece of code works as follows…

The purpose of the code is to put an incrementing number into my web page… that’s all – but the number is coming from another page.. and the purpose of this is to stop session timeouts by making sure that even when the user is idle – something is happening.

The function alertMsg() sets up the address of a web page which returns nothing more than an incrementing number. Every time you call the page, it returns  an incremented number – and the jQuery then forces that number into a SPAN on my web page.  You’ll note that the following line sets a 10 second timeout to call the same routine, over and over.

Finally the routine is called – which puts up the display and sets the timer to call the routine in 10 seconds – ad-infinitum.

Except that it works a treat in Firefox – and doesn’t work at ALL in Internet Explorer. 

There are TWO unrelated issues here – showing the differences between the browsers.

Firstly in Internet Explorer, the routine is never called (alertMsg()) in the first place – because the DOM is not ready when the routine runs – so the timer never gets set.  It would not matter anyway because Internet Explorer CACHES the call to ajax_keepalive() – and so it would  return the same value instead of an incrementing value – EVEN THOUGH calling this page directly in either browser WORKS a TREAT.

Here’s a version that works for both…

<script language=”javascript”>
function alertMsg()
{
var gm=”/admin/ajax_keepalive.asp?r=” + Math.random();
$.get( gm, function(data) { $(“#myTimer”).html(data); } );
var t=setTimeout(alertMsg,10000);

}
$(document).ready(function()
{
alertMsg();
});
</script>

Note that I’ve added a random number onto the end of the page call – as a parameter which never gets used – but it prevents cacheing… also I’ve wrapped the function call in a jQuery document ready function that makes sure this code (AlertMsg()) does not run until the DOM is ready.

Firefox does not need any of this stuff – Internet Explorer does – and we’re not talking old rubbish here – we’re looking at Firefox 7.01 and IE 9 !!!