AJAX IE7 Problem

**acoder** · Jan 14 '08, 09:14 AM

Hi Raef, welcome to TSDN!

In populateCombo() , you've not checked that the readyState is 4 and the response is OK before assuming the data is ready to use.

PS. I've removed the email addresses from the XML code in case they were real email addresses. This is for your own safety and that of others.

**RaefKandeel** · Jan 14 '08, 09:27 AM

Please note that the first statement in populateCombo calls createTempDiv which in turn checks the readyState. Please also note that it works fine in firefox 2.0, my problem is with IE7.

Also please note that xhr.responseTex t value is fine in the explorer. tempDiv.innerHT ML, however is wrong. So, it is not a problem with ajax.

Thanks for removing the e-mail addresses.

**acoder** · Jan 14 '08, 11:27 AM

The div element hasn't been added to the body. That may be the problem as far as I can see. If it's a valid XML file, you could use responseXML instead and use getElementsByTa gName on the responseXML object.

**Dasty** · Jan 14 '08, 11:52 AM

You can not use innerHTML to insert XML tags into your site, even when it is specified as xhml. innerHTML just simply cant do it right. Well, firefox fixed it some time ago, but it's just FF (it is from ver 1.5 or so). But it is not problem in your case, because you are using it just as "workaround " for XML parsing. As acoder said, use responseXML property to parse XML.

PS: One more thing about innerHTML: from my experience, dont try to read (find) elements created by setting innerHTML in the same javascript "thread" (as you did) :). It MAY fail ...

**RaefKandeel** · Jan 14 '08, 01:27 PM

Thanks for your help. I am facing problems with responseXML. When i try:-

Code:

alert (xhr.responseXML.getElementsByTagName("name")[3].nodeValue);

I get null. I was expecting to get instead: <name id="name4">Esha 3rany Ayoob</name>

However when I try: -

Code:

alert (xhr.responseXML.getElementsByTagName("name")[3].nodeName);

I get name, which shows it knows what I am talking about.

Edited: Okay I figured it out.

**RaefKandeel** · Jan 15 '08, 01:32 PM

Hi guys. Thanks to you, my code worked on both Mozilla Firefox 2.0 and Internet Explorer 7. I need little help of you. I am going to post my code again and please tell me if it adheres to the best programming practices. Any improvement ideas to the code would be highly appreciated.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Addres s Book</title>
<link rel="stylesheet " rev="stylesheet " href="StyleShee t.css" />
<script src="addressScr ipt.js" language=javasc ript></script>
</head>
<body>
<center><a href="#"><img src="images/address.jpg" width="500" height="100" id="clickLink"/></a></center>
<h2>By: Raef Kandeel</h2>
<b><font color=green><i>        Reference s: Visual QuickStart Guide JavaScript and Ajax for the Web, Sixth Edition, & nbsp; &nbs p; http://safari.oreilly. com/9781593271060/Iassignment_id1 4</i></font></b><br />
<table align=center><t d>
<select id="names" size=15></select> &n bsp; &nbsp ;  &n bsp; &nbsp ;  &n bsp; &nbsp ;   </td>
<td><div><b><fo nt color=red>the Name to Display the Contact Info</font></b></div></td></table>
</body>
</html>[/HTML]

[HTML]
<?xml version="1.0" encoding="utf-8" ?>
<addressBook>
<person>
<name>Raef Kandeel</name>
<address>olay a street</address>
<phone>32154451 </phone>
<emailAddress>r ******@gmail.co m</emailAddress>
</person>
<person>
<name>Mohamme d Hassanein Amer</name>
<address>Ta7'as osy Street</address>
<phone>64561215 </phone>
<emailAddress>* *****@gmail.com </emailAddress>
</person>
<person>
<name>Mohamme d Edoso2y</name>
<address>shar e3 enasr, egypt</address>
<phone>01625452 65</phone>
<emailAddress>* *****@gmail.com </emailAddress>
</person>
<person>
<name>Esha3ra ny Ayoob</name>
<address>el ma2atam</address>
<phone>01666688 822</phone>
<emailAddress>* *****@gmail.com </emailAddress>
</person>
<person>
<name>3amr Med7at</name>
<address>3amr Med7at's address is not available</address>
<phone>255562 4</phone>
<emailAddress>* ******@gmail.co m</emailAddress>
</person>
</addressBook>[/HTML]

Code:

window.onload= initializeAJAXandLink;
var xhr=false;

function initializeAJAXandLink() {
     if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
     }
     else {
        if (window.ActiveXObject) {
           try {
              xhr =new ActiveXObject("Msxml2.XMLHTTP");
           }
           catch (e) {xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
        }
     }
     if (xhr) {
        xhr.onreadystatechange = populateCombo;
        xhr.open("GET", "./AddressBook.xml", true);
        xhr.send(null);
     }
     else {
        alert("Sorry, but I couldn't create an XMLHttpRequest");
     }
     
     //also initialize the link
    document.getElementById ("clickLink").onmouseover= changeLinkColor;
    document.getElementById ("clickLink").onmouseout= changeBackLinkColor;
    document.getElementById ("clickLink").onmousedown= openLinkWindow;   
}

function populateCombo () {
        var tempDiv= createTempDiv();
	    var contacts=tempDiv.getElementsByTagName ("name"); 
    	var combo=document.getElementById ("names");
    	for (var i=0; i<contacts.length; i++) {
		        var newContact = document.createElement('option');
		        newContact.text = contacts[i].firstChild.nodeValue; 
		        try
                    {
                        combo.add(newContact,null); // standards compliant
                    }
                 catch(ex)
                    {      
                          combo.add(newContact); // IE only
                    }
       }
       combo.onchange=displayDetails;
}

function displayDetails () {
    var tempDiv= createTempDiv();
    var contacts=tempDiv.getElementsByTagName ("person");
    var divElement = document.getElementsByTagName ("div")[0];
    var neededContact= this.options [this.selectedIndex].text;
  	for (var i=0; i<contacts.length; i++) {
   	   	var name=tempDiv.getElementsByTagName ("name")[i].firstChild.nodeValue;
   	    var emailAddress=tempDiv.getElementsByTagName ("emailAddress")[i].firstChild.nodeValue;
   	    var phone=tempDiv.getElementsByTagName ("phone")[i].firstChild.nodeValue;
   	    var address=tempDiv.getElementsByTagName ("address")[i].firstChild.nodeValue;
   	    if (name==neededContact) {
   	        var stringOutput="<b>Name:&nbsp;</b>";
   	        stringOutput = stringOutput + name + "<br>";
   	        stringOutput+="<b>Phone:&nbsp;</b>";
   	        stringOutput = stringOutput + phone + "<br>";
   	        stringOutput+="<b>Address:&nbsp;</b>";
   	        stringOutput = stringOutput + address + "<br>";
   	        stringOutput+="<b>E-mail Address:&nbsp;</b>";
   	        stringOutput = stringOutput + emailAddress + "<br>";    
   	        divElement.innerHTML= stringOutput;

   	    }
   	}
}

function createTempDiv() {
           
        var tempDiv = false;
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                tempDiv= xhr.responseXML;  
            }                         
        } 
        return tempDiv;  
}

function changeLinkColor () {
    this.src = "images/address_on.jpg";
}

function changeBackLinkColor() {
      this.src = "images/address.jpg";
}

function openLinkWindow() {
     var newWindow = window.open("http://safari.oreilly.com/9781593271060/Iassignment_id14", "catWin", "resizable=yes, width=350,height=260");
     return false;

}

[HTML]
select
{
color:blue;
}

td
{
vertical-align:top;

}

table
{
background-position:center ;
border:7px;
border-style:solid;
border-color:Black;
}

div
{
width:350px;
}
[/HTML]

**acoder** · Jan 16 '08, 09:29 AM

Originally posted by RaefKandeel

Hi guys. Thanks to you, my code worked on both Mozilla Firefox 2.0 and Internet Explorer 7. I need little help of you. I am going to post my code again and please tell me if it adheres to the best programming practices. Any improvement ideas to the code would be highly appreciated.

You should use a strict doctype where possible and validate the HTML/CSS using the W3C validator.

The language attribute of the script tag has been deprecated - use type="text/javascript" instead. The font and center tags are also deprecated - use CSS instead. The table has no tr tag - you should discover that if you validate. The link should point to a real URL.

The populateCombo function will be called every time the readyState changes so you should wrap the whole function content in an if statement checking for ready state 4. The reason for this is that the code unnecessarily accesses the select element and sets its onchange.

AJAX IE7 Problem

AJAX IE7 Problem

Comment

Comment

Comment

Comment

Comment

Comment

Comment