By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,107 Members | 717 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,107 IT Pros & Developers. It's quick & easy.

Why AJAX content won't display with document.getElementByID().style.display in IE8?

P: 2
Hi All,

I'm seeing a strange issue with my code below. The content received thru the xmlHttpRequest, is not being displayed in IE8, after clicking the link. It is displayed only after moving the mouse/cursor, after clicking the link. Anyone sees what could be the problem here ? Please help.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5.    var xmlHttpfunction;
  6.    function ShowHint(id)
  7.    {
  8.       xmlHttp = GetXmlHttpObject();
  9.  
  10.       if (xmlHttp == null)
  11.       {
  12.          alert ("Browser does not support HTTP Request");
  13.          return;
  14.       }
  15.  
  16.       var url = "myurl.php";
  17.       url = url+"?id="+id;
  18.       xmlHttp.onreadystatechange = stateChanged;
  19.       xmlHttp.open("GET",url,true);
  20.       xmlHttp.send(null);
  21.    }
  22.  
  23.    function stateChanged()
  24.    {
  25.       if (xmlHttp.readyState === 4)
  26.       {
  27.          document.getElementById("elementRight").style.display = "block";
  28.          document.getElementById("elementRight").innerHTML = xmlHttp.responseText;
  29.       }
  30.    }
  31.  
  32. </script>
  33. </head>
  34. <body>
  35.       <div id="elementLeft">
  36.          <ul >
  37.             <li>
  38.                <a href="#" onclick="ShowHint("1");"> Item1 </a>
  39.             </li>
  40.             <li>
  41.                <a href="#" onclick="ShowHint("2");"> Item1 </a>
  42.             </li>
  43.             <li>
  44.                <a href="#" onclick="ShowHint("3");"> Item1 </a>
  45.             </li>
  46.          </ul>
  47.       </div>
  48.       <div class="element" id="elementRight">
  49.       </div>
  50. </body>
  51. </html>
  52.  
The css for 'element' is -
Expand|Select|Wrap|Line Numbers
  1. .element {
  2.         overflow:hidden;
  3.         border:1px;
  4.         border:#7CAFBE solid 1px;
  5.         height:50%;
  6.         width:79%;
  7.         float:right;
  8.         padding:0 0 0 10px;
  9.         padding-left:1px;
  10.         z-index:1000;
  11.    }
  12.  
Many Thanks,
csoft
Jan 24 '11 #1
Share this Question
Share on Google+
3 Replies

Oralloy
Expert 100+
P: 983
csoft,

I am surprised that you're seeing anything at all, considering the apparent syntax errors in lines 38, 41, and 44, where you have apparently violated HTMLs quoting rules. For example:
Expand|Select|Wrap|Line Numbers
  1. <a href="#" onclick="ShowHint("1");"> Item1 </a>,
Should probably be:
Expand|Select|Wrap|Line Numbers
  1. <a href="#" onclick="ShowHint('1');"> Item1 </a>,
Nevertheless, since it is working, that is not the fundamental problem that you're encountering...

The second problem I see is that you aren't stopping the anchor link in your code snippet. You probably should add a return false; to each of the events, like this:
Expand|Select|Wrap|Line Numbers
  1. <a href="#" onclick="ShowHint('1'); return false;"> Item1 </a>,
Luck!
Oralloy
Jan 24 '11 #2

P: 2
Oralloy,

Thanks for responding.

This was a typo, while copying the code -
Expand|Select|Wrap|Line Numbers
  1. <a href="#" onclick="ShowHint("1");"> Item1 </a>
  2.  
Sorry about that.

I now have the following, as you suggested -
Expand|Select|Wrap|Line Numbers
  1. <a href="#" onclick="ShowHint('1');return false;">
  2.    Item1
  3. </a>
  4.  
But, I still see the same result.

Actually, when I click on the link 'Item1', a dotted border around 'Item1' appears and only when I move the mouse arrow out of this dotted border, the content is loaded. Has this got anything to do with the anchor tag itself ? The following is the css for the anchor tag -

Expand|Select|Wrap|Line Numbers
  1. a {
  2.         color:#000000; 
  3.         text-decoration: none;
  4.         font-family: verdana;
  5.         font-size: 11px;
  6.         padding:0 0 0 10px; 
  7.         text-align: center;
  8.         cursor: pointer;
  9. }
  10.  
Thanks Again,
csoft
Jan 25 '11 #3

Oralloy
Expert 100+
P: 983
You may be running into variable scoping rules with xmlHttp.

Try hoisting the onreadystatechange to an anonymous function, like this:
Expand|Select|Wrap|Line Numbers
  1.    function ShowHint(id) 
  2.    { 
  3.       xmlHttp = GetXmlHttpObject(); 
  4.  
  5.       if (xmlHttp == null) 
  6.       { 
  7.          alert ("Browser does not support HTTP Request"); 
  8.          return; 
  9.       } 
  10.  
  11.       var url = "myurl.php"; 
  12.       url = url+"?id="+id; 
  13.       xmlHttp.onreadystatechange =
  14.         function(){
  15.           if (xmlHttp.readyState == 4) 
  16.           { 
  17.             document.getElementById("elementRight").style.display = "block"; 
  18.             document.getElementById("elementRight").innerHTML = xmlHttp.responseText; 
  19.           } 
  20.         }
  21.       xmlHttp.open("GET",url,true); 
  22.       xmlHttp.send(null); 
  23.    } 
Also, I changed the state comparison from absolute equality (===) to simple equality (==).

Luck!
Oralloy
Jan 25 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.