JavaScript, JQuery and Leading Browsers– behavioural differences
It’s the 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 (differences show in orange)…
<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 !!!