?
Solved

XML Data in HTML using datasrc and datafld

Posted on 2009-12-25
17
Medium Priority
?
2,750 Views
Last Modified: 2012-05-08
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

0
Comment
Question by:hhammash
  • 8
  • 7
  • 2
17 Comments
 
LVL 11

Expert Comment

by:Goodangel Matope
ID: 26123616
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
 
LVL 14

Author Comment

by:hhammash
ID: 26123629
What about Internet Explorer 8?  The code is not working on IE8.
0
 
LVL 11

Expert Comment

by:Goodangel Matope
ID: 26123667
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 14

Author Comment

by:hhammash
ID: 26123851
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
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 26123944
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
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 26123955
> 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
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 26123956
@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
 
LVL 14

Author Comment

by:hhammash
ID: 26124575
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
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 26124601
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
 
LVL 14

Author Comment

by:hhammash
ID: 26125398
I changed it to ActiveXObject("Msxml2.XMLHTTP") ,  but I am getting a blank screen in IE8. In FireFox it is working fine.
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 26125404
Does it still work in IE7?
just to make sure we didn't make a typing error
0
 
LVL 14

Author Comment

by:hhammash
ID: 26125464
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
 
LVL 60

Accepted Solution

by:
Geert Bormans earned 1000 total points
ID: 26125603
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
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 26125606
If you require the table sorting that data islands give you natively, an approach using sariisa and XSLT will be more appropriate
0
 
LVL 14

Author Comment

by:hhammash
ID: 26126365
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
 
LVL 14

Author Closing Comment

by:hhammash
ID: 31669947
Great help
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 26126618
welcome
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question