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.

Expand|Select|Wrap|Line Numbers

 
<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 -

Expand|Select|Wrap|Line Numbers

 
.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

Jan 24 '11 #1

Subscribe Post Reply

2184

Oralloy

985

Expert 512MB

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

<a href="#" onclick="ShowHint("1");"> Item1 </a>,

Should probably be:

Expand|Select|Wrap|Line Numbers

<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

<a href="#" onclick="ShowHint('1'); return false;"> Item1 </a>,

Luck!
Oralloy

Jan 24 '11 #2

csoft ltd

Oralloy,

Thanks for responding.

This was a typo, while copying the code -

Expand|Select|Wrap|Line Numbers

<a href="#" onclick="ShowHint("1");"> Item1 </a>

Sorry about that.

I now have the following, as you suggested -

Expand|Select|Wrap|Line Numbers

 
<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 -

Expand|Select|Wrap|Line Numbers

 
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

Jan 25 '11 #3

Oralloy

985

Expert 512MB

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

    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

Jan 25 '11 #4

by: Stewart | last post by:

Hi Experts. Please put the code sample below into an html document and take a look at in NN6+. One span should be shown while the other is hidden. Clicking the button should reverse this. ...

Javascript

document.getElementById( ....

by: PaulB | last post by:

Good Morning everybody, I'm trying to adapt a tutorial script that will handle the behaviour of an "Expanding/Contracting" site-navigation menu. The code that seems to handle the expansion and...

Javascript

problem - myDiv.style.display='none' doesn't make anything invisible.

by: Jake Barnes | last post by:

Imagine I've this block of HTML: <p>Alex Schein Mailing List <input type="checkbox" name="newslettersToUse" value="133156"> (<a href="mcControlPanel.php"...

Javascript

Firefox browser style.display issue (IE works fine)

by: RonY | last post by:

I have a dropdown which calls SetTimePeriod method on change the selection. In the JS function, I reset the field style.display based on what the selection is. This works fine with IE but not working...

Javascript

Where is the mistake? <UL> + style.display

by: Winston | last post by:

Where is the mistake? I want to make a simple menu. These are two pieces of two files... function ShowMenu(objeto) { is_open = document.getElementById(objeto).style.display;...

Javascript

Regarding the document.getElementById("").style.display="Inline"

by: mandarchalke29 | last post by:

Can you please tell me that document.getElementById("").style.display="Inline" what does this statement will do.

Javascript

help regarding document.getElementById('').styles.display

by: omerbutt | last post by:

hi there i am amking an inventory application with php,ajax,javascript,html,dhtml,sql the problem is that i have hidden the input fields regarding the replace no's of the parts with this line of...

Javascript

[SOLVED] how to document.getElementById().style.padding-left ?

by: jmatos | last post by:

I need to change the style of an element changing its padding-left property (got it in firefox but IE is a different battle..). I can use document.getElementById().style.XX to everything i need,...

Javascript

JavaScript Style.display not working

by: dgourd | last post by:

I cant get the style.display property to work properly. I have this test html page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...

Javascript

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

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

Similar topics