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

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • csoft ltd
    New Member
    • Jan 2011
    • 2
    #1

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

    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.

    Code:
    <html>
<head>
<script type="text/javascript">

   var xmlHttpfunction;
   function ShowHint(id)
   {
      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 stateChanged()
   {
      if (xmlHttp.readyState === 4)
      {
         document.getElementById("elementRight").style.display = "block";
         document.getElementById("elementRight").innerHTML = xmlHttp.responseText;
      }
   }

</script>
</head>
<body>
      <div id="elementLeft">
         <ul >
            <li>
               <a href="#" onclick="ShowHint("1");"> Item1 </a>
            </li>
            <li>
               <a href="#" onclick="ShowHint("2");"> Item1 </a>
            </li>
            <li>
               <a href="#" onclick="ShowHint("3");"> Item1 </a>
            </li>
         </ul>
      </div>
      <div class="element" id="elementRight">
      </div>
</body>
</html>
    The css for 'element' is -
    Code:
    .element {
        overflow:hidden;
        border:1px;
        border:#7CAFBE solid 1px;
        height:50%;
        width:79%;
        float:right;
        padding:0 0 0 10px;
        padding-left:1px;
        z-index:1000;
   }
    Many Thanks,
    csoft
    Tags: None
    • Oralloy
      Recognized Expert Contributor
      • Jun 2010
      • 988
      #2
      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:
      Code:
      <a href="#" onclick="ShowHint("1");"> Item1 </a>,
      Should probably be:
      Code:
      <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:
      Code:
      <a href="#" onclick="ShowHint('1'); return false;"> Item1 </a>,
      Luck!
      Oralloy

        Comment

        • csoft ltd
          New Member
          • Jan 2011
          • 2
          #3
          Oralloy,

          Thanks for responding.

          This was a typo, while copying the code -
          Code:
          <a href="#" onclick="ShowHint("1");"> Item1 </a>
          Sorry about that.

          I now have the following, as you suggested -
          Code:
          <a href="#" onclick="ShowHint('1');return false;">
   Item1
</a>
          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 -

          Code:
          a {
        color:#000000; 
        text-decoration: none;
        font-family: verdana;
        font-size: 11px;
        padding:0 0 0 10px; 
        text-align: center;
        cursor: pointer;
}
          Thanks Again,
          csoft

            Comment

            • Oralloy
              Recognized Expert Contributor
              • Jun 2010
              • 988
              #4
              You may be running into variable scoping rules with xmlHttp.

              Try hoisting the onreadystatecha nge to an anonymous function, like this:
              Code:
                 function ShowHint(id) 
   { 
      xmlHttp = GetXmlHttpObject(); 
  
      if (xmlHttp == null) 
      { 
         alert ("Browser does not support HTTP Request"); 
         return; 
      } 
  
      var url = "myurl.php"; 
      url = url+"?id="+id; 
      xmlHttp.onreadystatechange =
        function(){
          if (xmlHttp.readyState == 4) 
          { 
            document.getElementById("elementRight").style.display = "block"; 
            document.getElementById("elementRight").innerHTML = xmlHttp.responseText; 
          } 
        }
      xmlHttp.open("GET",url,true); 
      xmlHttp.send(null); 
   }
              Also, I changed the state comparison from absolute equality (===) to simple equality (==).

              Luck!
              Oralloy

                Comment

                Previous template Next
                Working...