I have encountered a peculiar problem with the code below. In Internet Explorer 8, the content retrieved through xmlHttpRequest does not appear immediately after clicking the link. It only displays after moving the mouse or cursor following the click.
<html>
<head>
<script language="javascript">
var xmlHttpfunction;
function ShowHint(str,id,currentid,count)
{
for(i = 0; i < count; i++)
{
if (i == currentid)
{
cellImg(i,'images/head_on.jpg');
}
else
{
cellImg(i,'images/btn_img.jpg');
}
}
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url = "myurl.php";
url = url+"?id="+id;
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function cellImg(idCell, imgName)
{
document.getElementById(idCell).style.background = "url(" + imgName + ")";
}
function stateChanged()
{
if (xmlHttp.readyState === 1)
{
document.getElementById("element").innerHTML = "<p align='center'><img src='images/wait.gif'></p>";
}
else if (xmlHttp.readyState === 4)
{
document.getElementById("element").style.display = "block";
document.getElementById("element").innerHTML = xmlHttp.responseText;
}
}
</script>
</head>
<body>
<div id="navigation">
<ul >
<li id=1 >
<a href="#" onclick="ShowHint('menu',42,1,18);return false;">
Item 1
</a>
</li>
<li id=2 >
<a href="#" onclick="ShowHint('menu',11,2,18);return false;">
Item 2
</a>
</li>
<li id=3 >
<a href="#" onclick="ShowHint('menu',12,3,18);return false;">
Item 3
</a>
</li>
</ul>
</div>
<div class="element" id="element">
</div>
</body>
</html>
While this code functions correctly on Firefox, Safari, Chrome and Opera browsers, it faces an issue in IE8 where the loaded content is not displayed without any cursor movement post-clicking the link.
I have attempted debugging using alerts and IE8's script debugger (in Tools->DeveloperTools) but I was unable to identify the root cause of the issue.
Any assistance on resolving this matter would be greatly appreciated.
Warm regards, sgullap