XML Data in HTML using datasrc and datafld

Hi,
I have the following code which works perfectly on IE7.  But it displays only table heading in IE8 and displays the code under the table in FireFox.

What to do to make the code work fine in IE8 and FireFox?

Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<title>New Page 1</title>
</head>

<body>
<table datasrc="#products" border="1" width="400" cellspacing="1" style="border-collapse: collapse" id="table1">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Type</th>
</tr>
</thead>
<tbody>
	<tr>
		<td><span datafld="name"></span></td>
		<td><span datafld="type"></span></td>
		<td><span datafld="price"></span></td>
	</tr>
</tbody>
</table>


<xml id="products">
<items>
	<item id="item1">
		<name>Mocha</name>
		<type>Coffee</type>
		<price>$3</price>
	</item>

	<item id="item2">
		<name>Black Coffee</name>
		<type>Coffee</type>
		<price>$31</price>
	</item>

	<item id="item3">
		<name>Capocino</name>
		<type>Coffee</type>
		<price>$12</price>
	</item>

	<item id="item4">
		<name>Late</name>
		<type>Coffee</type>
		<price>$9</price>
	</item>

	<item id="item5">
		<name>Mochchino</name>
		<type>Coffee</type>
		<price>$8</price>
	</item>
</items>
</xml>


</body>

</html>

Open in new window

LVL 14
hhammashAsked:
Who is Participating?
 
Geert BormansInformation ArchitectCommented:
This will work in IE8 and FF (tested).
Have not tested this in older versions of IE, but it should work as well


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<!-- Generated by Developer Tools. This might not be an accurate representation of the original source file --> 
<HTML><HEAD></HEAD> 
<BODY> 
<SCRIPT type=text/javascript> 
function loadXML(file) {
if(document.implementation && document.implementation.createDocument) {
    
        var req = new XMLHttpRequest();
        req.open("GET", file, false);
        req.send(null);
        xmlDoc = req.responseXML;
     
    } 
      else if(typeof window.ActiveXObject != 'undefined') {
        //load xml file
        xmlDoc = new ActiveXObject('MSXML2.DOMDocument');   
        xmlDoc.async = false;   
        xmlDoc.load(file);  
   }
}
loadXML("items.xml");
 
document.write("<table border='1'>"); 
document.write("<thead>"); 
document.write("<tr>"); 

...

Open in new window

0
 
Goodangel MatopeSoftware ArchitectCommented:
Well, to the best of my knowledge, this kind of data representation (using datafld and datasrc) is proprietary to Microsoft. I stand to be corrected if I am wrong. I guess you will have to put this code on the server side for it to work with Firefox. :-)
0
 
hhammashAuthor Commented:
What about Internet Explorer 8?  The code is not working on IE8.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Goodangel MatopeSoftware ArchitectCommented:
Interesting. Unfortunately I dont have IE8 as I use firefox and opera mainly. If the code is not working on ie8, I strongly suggest putting the code on the server side and sending an already populated table as html. The other alternative would be to use AJAX for the data. Ajax works on all browsers.
0
 
hhammashAuthor Commented:
I have no idea about Ajax.  I have never used it.

The page should be html.

I tried javascript to read the same file.  It worked fine with Firefox and IE7 but not IE8.

I searched a lot and found hints that datasrc and datafld are not anymore supported by IE8.

0
 
Geert BormansInformation ArchitectCommented:
The technique you are using is referrred to as "XML data islands in html"
Is has been out of date for over 10 years.
In Internet Explorer 8 MicroSoft dropped its MSXML3 parser in favour of MSXML6 (finally!!!)
But with that the support for the old msxml dom (the one prior to msxml3)

XML data islands were an old (should have been out of use at least ten years ago)
that was IE only (it is an old extra on the msxml parser)
So it never worked in any browser outside IE, and it stopped working for IE8

In order to get the same effect,
here is what you should do
- download some sort of AJAX or XML cross browser javascript library. I strongly recommend Sarissa
- put some javascript that calls in the XML and an XSLT
- develop an XSLT that makes the table from the XML

That is quiet a few steps, I will check to see if I can wrap up an example this morning
0
 
Geert BormansInformation ArchitectCommented:
> I tried javascript to read the same file.  It worked fine with Firefox and IE7 but not IE8.

Most examples you find out on the web, call out for the old msxml dom object (out of date for at least 12 years)
It is sad that maintenance on web examples is so bad.
By making IE8 no longer include msxml3 which was backwards compatible,
IE8 broke all these examples,
If you post your javascript, I will tell you what to change in order to make it work for IE8 as well

note that I am extremely happy that IE no longer comes with msxml3,
since it now forces users to get rid of the old slow and non standard parser examples
0
 
Geert BormansInformation ArchitectCommented:
@goodangel,
No need to put it server side. I have lots of projects using sarissa to get it working cross browser on the client
0
 
hhammashAuthor Commented:
Hi Gertone,

This is the Javscript code.

Thank you
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Generated by Developer Tools. This might not be an accurate representation of the original source file -->
<HTML><HEAD></HEAD>
<BODY>
<SCRIPT type=text/javascript>
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","items.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

document.write("<table border='1'>");
document.write("<thead>");
document.write("<tr>");
document.write("<th>Name");
document.write("</th>");
document.write("<th>Type");
document.write("</th>");
document.write("<th>Price");
document.write("</th></tr>");
document.write("</thead>");

var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
  {
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");

  }
document.write("</table>");
</SCRIPT>
</BODY></HTML>

Open in new window

0
 
Geert BormansInformation ArchitectCommented:
if you would use
ActiveXObject("Msxml2.XMLHTTP")
instead of
ActiveXObject("Microsoft.XMLHTTP");
it will work for all versions of IE starting from IE5 at least
0
 
hhammashAuthor Commented:
I changed it to ActiveXObject("Msxml2.XMLHTTP") ,  but I am getting a blank screen in IE8. In FireFox it is working fine.
0
 
Geert BormansInformation ArchitectCommented:
Does it still work in IE7?
just to make sure we didn't make a typing error
0
 
hhammashAuthor Commented:
I tried it in IE7,  I have the same:

1- Warning at the top of the page in a yellow bar saying "to help protect ...IE Has restricted .....Runnin scripts or ActiveX controls .....click here for options.
2- I click
3- Allow Blocked items
4- Click yes

Same resutl,  blank page.

I attached the xml file code so you can try it.
<?xml version="1.0" encoding="utf-8"?>
<items>
	<item id="item1">
		<name>Mocha</name>
		<type>Coffee</type>
		<price>$3</price>
	</item>


	<item id="item2">
		<name>Black Coffee</name>
		<type>Coffee</type>
		<price>$31</price>
	</item>


	<item id="item3">
		<name>Capocino</name>
		<type>Coffee</type>
		<price>$12</price>
	</item>

	<item id="item4">
		<name>Late</name>
		<type>Coffee</type>
		<price>$9</price>
	</item>


	<item id="item5">
		<name>Mochchino</name>
		<type>Coffee</type>
		<price>$8</price>
	</item>
</items>

Open in new window

0
 
Geert BormansInformation ArchitectCommented:
If you require the table sorting that data islands give you natively, an approach using sariisa and XSLT will be more appropriate
0
 
hhammashAuthor Commented:
Thank you Gertone,

The code is working fine in IE7, IE8, Safari and FireFox.

I will try your recommendation (Sarisa and XSLT)

Thank you
0
 
hhammashAuthor Commented:
Great help
0
 
Geert BormansInformation ArchitectCommented:
welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.