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

AJAX IE7 Problem

P: 4
Hi all, this is my first post.

I have a little ajax assignment that works fine on mozilla firefox 2.0, but doesn't work at all on Internet Explorer 7. Apparently it has to do with the line where tempDiv element takes the value from xhr.responseText. The line that says: tempDiv.innerHTML= xhr.responseText;. Apparently Internet Explorer 7 cuts off some tags. There goes my code:-

HTML:-
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Address Book</title>
<link rel="stylesheet" rev="stylesheet" href="StyleSheet.css" />
<script src="addressScript.js" language=javascript></script>
</head>
<body>
<h1>Address Book</h1>
<h2>By: Raef Kandeel</h2>
<b><font color=green>References: Visual QuickStart Guide JavaScript and Ajax for the Web, Sixth Edition, http://safari.oreilly.com/9781593271060/Iassignment_id14</font></b><br />
<table><td>
<select id="names" size=15></select></td>
<td><div><b><font color=red>Click the Name to Display the Contact Info</font></b></div></td></table>
<p></p>
</body>
</html>
[/HTML]

javascript:-
Expand|Select|Wrap|Line Numbers
  1. window.onload= initializeAJAX;
  2. var xhr=false;
  3.  
  4. function initializeAJAX() {
  5.      if (window.XMLHttpRequest) {
  6.         xhr = new XMLHttpRequest();
  7.      }
  8.      else {
  9.         if (window.ActiveXObject) {
  10.            try {
  11.               xhr =new ActiveXObject("Msxml2.XMLHTTP");
  12.            }
  13.            catch (e) {xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
  14.         }
  15.      }
  16.      if (xhr) {
  17.         xhr.onreadystatechange = populateCombo;
  18.         xhr.open("GET", "./AddressBook.xml", true);
  19.         xhr.send(null);
  20.      }
  21.      else {
  22.         alert("Sorry, but I couldn't create an XMLHttpRequest");
  23.      }
  24.  
  25. }
  26.  
  27. function populateCombo () {
  28.         //create new temporary element
  29.         var tempDiv= createTempDiv();
  30.         var contacts=tempDiv.getElementsByTagName ("name");  
  31.         var combo=document.getElementById ("names");
  32.         for (var i=0; i<contacts.length; i++) {
  33.                 var newContact = document.createElement('option');
  34.                 newContact.text = contacts[i].innerHTML; 
  35.                 try
  36.                     {
  37.                         combo.add(newContact,null); // standards compliant
  38.                     }
  39.                  catch(ex)
  40.                     {      
  41.                           combo.add(newContact); // IE only
  42.                     }
  43.        }
  44.        combo.onchange=displayDetails;
  45. }
  46.  
  47. function displayDetails () {
  48.     var tempDiv= createTempDiv();
  49.     var contacts=tempDiv.getElementsByTagName ("*");
  50.     var divElement = document.getElementsByTagName ("div")[0];
  51.     var neededContact= this.options [this.selectedIndex].text;
  52.  
  53.        //store elements in tag "p"
  54.        storeP (contacts);
  55.  
  56.        var i=1;
  57.  
  58.     while (document.getElementById ("name" +i)){
  59.            var name=document.getElementById ("name" +i).innerHTML;
  60.            var emailAddress=document.getElementById ("emailAddress" +i).innerHTML;
  61.            var phone=document.getElementById ("phone" +i).innerHTML;
  62.            var address=document.getElementById ("address" +i).innerHTML;
  63.            if (name==neededContact) {
  64.                var stringOutput="<b>Name:&nbsp;</b>";
  65.                stringOutput = stringOutput + name + "<br>";
  66.                stringOutput+="<b>Phone:&nbsp;</b>";
  67.                stringOutput = stringOutput + phone + "<br>";
  68.                stringOutput+="<b>Address:&nbsp;</b>";
  69.                stringOutput = stringOutput + address + "<br>";
  70.                stringOutput+="<b>E-mail Address:&nbsp;</b>";
  71.                stringOutput = stringOutput + emailAddress + "<br>";    
  72.                divElement.innerHTML= stringOutput;
  73.  
  74.            }
  75.            i++;
  76.        }
  77. }
  78.  
  79. function createTempDiv() {
  80.  
  81.         var tempDiv = document.createElement ("div");
  82.         if (xhr.readyState == 4) {
  83.             tempDiv.innerHTML= xhr.responseText;
  84.         } 
  85.  
  86.  
  87.         return tempDiv;  
  88. }
  89.  
  90.  
  91.  
  92. function storeP (contacts) {
  93.     var paragraphNode=document.getElementsByTagName ("p")[0];
  94.     if (!paragraphNode.innerHTML) { 
  95.         for (var i=0; i<contacts.length; i++) {
  96.             document.getElementsByTagName ("p")[0].appendChild ((contacts[i]).cloneNode(true));
  97.     }}
  98. }
  99.  
CSS:-
Expand|Select|Wrap|Line Numbers
  1. h1
  2. {
  3.     text-align:center;
  4. }
  5.  
  6. select 
  7. {
  8.    color:blue;
  9. }
  10.  
  11. p
  12. {
  13.     display:none;
  14. }
  15.  
  16. td
  17. {
  18.     vertical-align:top;
  19.  }
  20.  
  21. table 
  22. {
  23.     border:15px;
  24.     border-style:solid;
  25.     border-spacing:100px;
  26. }
  27.  
  28. div
  29. {
  30.     width:700px;    
  31. }
XML:-

[HTML]<?xml version="1.0" encoding="utf-8" ?>

<addressBook>
<person>
<name id="name1">Raef Kandeel</name>
<address id="address1">olaya street</address>
<phone id="phone1">32154451</phone>
<emailAddress id="emailAddress1">****@hotmail.com</emailAddress>
</person>
<person>
<name id="name2">Mohammed Hassanein Amer</name>
<address id="address2">Ta7'asosy Street</address>
<phone id="phone2">64561215</phone>
<emailAddress id="emailAddress2">****@gmail.com</emailAddress>
</person>
<person>
<name id="name3">Mohammed Edoso2y</name>
<address id="address3">share3 enasr, egypt</address>
<phone id="phone3">0162545265</phone>
<emailAddress id="emailAddress3">****@gmail.com</emailAddress>
</person>
<person>
<name id="name4">Esha3rany Ayoob</name>
<address id="address4">el ma2atam</address>
<phone id="phone4">01666688822</phone>
<emailAddress id="emailAddress4">****@gmail.com</emailAddress>
</person>
</addressBook>[/HTML]

Thanks Guys
Jan 14 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
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.
Jan 14 '08 #2

P: 4
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.responseText value is fine in the explorer. tempDiv.innerHTML, however is wrong. So, it is not a problem with ajax.

Thanks for removing the e-mail addresses.
Jan 14 '08 #3

acoder
Expert Mod 15k+
P: 16,027
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 getElementsByTagName on the responseXML object.
Jan 14 '08 #4

Dasty
Expert 100+
P: 101
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 ...
Jan 14 '08 #5

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

Expand|Select|Wrap|Line Numbers
  1. alert (xhr.responseXML.getElementsByTagName("name")[3].nodeValue);
I get null. I was expecting to get instead: <name id="name4">Esha3rany Ayoob</name>

However when I try: -

Expand|Select|Wrap|Line Numbers
  1. 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.
Jan 14 '08 #6

P: 4
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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Address Book</title>
<link rel="stylesheet" rev="stylesheet" href="StyleSheet.css" />
<script src="addressScript.js" language=javascript></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>&nbsp; &nbsp; &nbsp; &nbsp;References: Visual QuickStart Guide JavaScript and Ajax for the Web, Sixth Edition,&nbsp;&nbsp;&nbsp;&nbsp; http://safari.oreilly.com/9781593271060/Iassignment_id14</i></font></b><br />
<table align=center><td>
<select id="names" size=15></select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;</td>
<td><div><b><font 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>olaya street</address>
<phone>32154451</phone>
<emailAddress>r******@gmail.com</emailAddress>
</person>
<person>
<name>Mohammed Hassanein Amer</name>
<address>Ta7'asosy Street</address>
<phone>64561215</phone>
<emailAddress>******@gmail.com</emailAddress>
</person>
<person>
<name>Mohammed Edoso2y</name>
<address>share3 enasr, egypt</address>
<phone>0162545265</phone>
<emailAddress>******@gmail.com</emailAddress>
</person>
<person>
<name>Esha3rany Ayoob</name>
<address>el ma2atam</address>
<phone>01666688822</phone>
<emailAddress>******@gmail.com</emailAddress>
</person>
<person>
<name>3amr Med7at</name>
<address>3amr Med7at's address is not available</address>
<phone>2555624</phone>
<emailAddress>*******@gmail.com</emailAddress>
</person>
</addressBook>[/HTML]

Expand|Select|Wrap|Line Numbers
  1. window.onload= initializeAJAXandLink;
  2. var xhr=false;
  3.  
  4. function initializeAJAXandLink() {
  5.      if (window.XMLHttpRequest) {
  6.         xhr = new XMLHttpRequest();
  7.      }
  8.      else {
  9.         if (window.ActiveXObject) {
  10.            try {
  11.               xhr =new ActiveXObject("Msxml2.XMLHTTP");
  12.            }
  13.            catch (e) {xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
  14.         }
  15.      }
  16.      if (xhr) {
  17.         xhr.onreadystatechange = populateCombo;
  18.         xhr.open("GET", "./AddressBook.xml", true);
  19.         xhr.send(null);
  20.      }
  21.      else {
  22.         alert("Sorry, but I couldn't create an XMLHttpRequest");
  23.      }
  24.  
  25.      //also initialize the link
  26.     document.getElementById ("clickLink").onmouseover= changeLinkColor;
  27.     document.getElementById ("clickLink").onmouseout= changeBackLinkColor;
  28.     document.getElementById ("clickLink").onmousedown= openLinkWindow;   
  29. }
  30.  
  31. function populateCombo () {
  32.         var tempDiv= createTempDiv();
  33.         var contacts=tempDiv.getElementsByTagName ("name"); 
  34.         var combo=document.getElementById ("names");
  35.         for (var i=0; i<contacts.length; i++) {
  36.                 var newContact = document.createElement('option');
  37.                 newContact.text = contacts[i].firstChild.nodeValue; 
  38.                 try
  39.                     {
  40.                         combo.add(newContact,null); // standards compliant
  41.                     }
  42.                  catch(ex)
  43.                     {      
  44.                           combo.add(newContact); // IE only
  45.                     }
  46.        }
  47.        combo.onchange=displayDetails;
  48. }
  49.  
  50. function displayDetails () {
  51.     var tempDiv= createTempDiv();
  52.     var contacts=tempDiv.getElementsByTagName ("person");
  53.     var divElement = document.getElementsByTagName ("div")[0];
  54.     var neededContact= this.options [this.selectedIndex].text;
  55.       for (var i=0; i<contacts.length; i++) {
  56.               var name=tempDiv.getElementsByTagName ("name")[i].firstChild.nodeValue;
  57.            var emailAddress=tempDiv.getElementsByTagName ("emailAddress")[i].firstChild.nodeValue;
  58.            var phone=tempDiv.getElementsByTagName ("phone")[i].firstChild.nodeValue;
  59.            var address=tempDiv.getElementsByTagName ("address")[i].firstChild.nodeValue;
  60.            if (name==neededContact) {
  61.                var stringOutput="<b>Name:&nbsp;</b>";
  62.                stringOutput = stringOutput + name + "<br>";
  63.                stringOutput+="<b>Phone:&nbsp;</b>";
  64.                stringOutput = stringOutput + phone + "<br>";
  65.                stringOutput+="<b>Address:&nbsp;</b>";
  66.                stringOutput = stringOutput + address + "<br>";
  67.                stringOutput+="<b>E-mail Address:&nbsp;</b>";
  68.                stringOutput = stringOutput + emailAddress + "<br>";    
  69.                divElement.innerHTML= stringOutput;
  70.  
  71.            }
  72.        }
  73. }
  74.  
  75. function createTempDiv() {
  76.  
  77.         var tempDiv = false;
  78.         if (xhr.readyState == 4) {
  79.             if (xhr.status == 200) {
  80.                 tempDiv= xhr.responseXML;  
  81.             }                         
  82.         } 
  83.         return tempDiv;  
  84. }
  85.  
  86. function changeLinkColor () {
  87.     this.src = "images/address_on.jpg";
  88. }
  89.  
  90. function changeBackLinkColor() {
  91.       this.src = "images/address.jpg";
  92. }
  93.  
  94. function openLinkWindow() {
  95.      var newWindow = window.open("http://safari.oreilly.com/9781593271060/Iassignment_id14", "catWin", "resizable=yes, width=350,height=260");
  96.      return false;
  97.  
  98. }
  99.  
[HTML]
select
{
color:blue;
}

td
{
vertical-align:top;


}

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

div
{
width:350px;
}
[/HTML]
Jan 15 '08 #7

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 16 '08 #8

Post your reply

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