Click here to Skip to main content
Click here to Skip to main content

Loading XML data to HTML table using XML DSO object and JavaScript

, 16 Oct 2005
Rate this:
Please Sign up or sign in to vote.
This article illustrates the process of fetching data from an XML file to be filled in an HTML table, using DSO and JavaScript.

Introduction

This article illustrates the process of fetching data from an XML file to be filled in an HTML table, using DSO and JavaScript.

DSO

DSO is an object that operates like a database on the client side. It will accept information that is organized in a certain way and will manipulate it with its own database engine. Like any object it has an interface with its own properties and methods, and you can manipulate the data stored in the object using these methods. The default behavior of XML DSO is to validate the document and to resolve external entities as the XML document is loaded.

Loading external files

<xml id="equipdet"  src="equip.xml" async="false"></xml>

The simple HTML code creates an XML DSO with a DOM object and loads it with the file equip.xml. At the same time this file is loaded, equip.xml is validated and all the external entities are expanded. The async="false" attribute is added to make sure all the XML data is loaded before any other HTML processing takes place.

XML File Format
---------------

<?xml version="1.0" encoding="iso-8859-1"?>
<equipment>
 <details>
  <name>Hard Disk</name>
  <rate>2800</rate>
  <manufacturer>SeaGate</manufacturer>  
 </details>

 <details>
  <name>Motherboard</name>
  <rate>10000</rate>
  <manufacturer>Intel</manufacturer>  
 </details>
 <details>
  <name>Monitor</name>
  <rate>8000</rate>
  <manufacturer>Samsung</manufacturer>  
 </details>
 <details>
  <name>Rajadurai</name>
  <rate>Tuticorin</rate>
  <manufacturer>Tamilnad</manufacturer>  
 </details>
</equipment>

DSO allows data binding to HTML table elements. When a table element is bound there is no need to write out the code for individual rows for each record in the recordset. The DSO will automatically do this for each record.

To bind the XML data to an HTML table, add a datasrc attribute to the table element, and add the datafld attribute to the span elements inside the table data.

Here name, rate and manufacturer are used to bind the data to the HTML element. We can bind to the input textboxes and all other elements in the same way:

<table width="80%" id=nbbeq datasrc="#equipdet"  border="1">
    <caption>
        <span class="style1">Equipment Details</span>
    </caption>
    <thead>
        <tr>
            <th>name </span></th>
            <th>city </span></th>
            <th>state </span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span datafld="name"> </span></td>
            <td><span datafld="rate"> </span></td>
            <td><span datafld="manufacturer"> </span></td>
        </tr>
    </tbody>
</table>

Using JavaScript to load the XML file data to the HTML file using DSO

First we create a new DSO via code:

<object id="nb_equip" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
        width="0" height="0">
</object>

Next we make a DOM object. This is done using the XMLDocument property of the DSO.

var doc=nb_equip.XMLDocument;

Once a DOM object has been created use the load method of the DOM object to load a file:

doc.load("equip.xml");

The following JavaScript function is used to load the XML file to DSO objects. When the user calls this function it will load the XML file and bind the data to the HTML table based on datasrc and datafld attributes:

//Following function is used to load the "equip.xml" file..
 function ld_equip()
 {
    var doc=nb_equip.XMLDocument;
    doc.load("equip.xml");
    document.getElementById("head_id").innerHTML=
                                  "Equipment Details "; 
 }
 //Following function is used to load the "details.xml" file..
 function ld_eng()
 {
    var doc_s=ds_staff.XMLDocument;
    doc_s.load("details.xml");
    document.getElementById("head_id_d").innerHTML=
                                      "Staff Details "; 
 }

The complete source code is given below:

<!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>
      <meta http-equiv="Content-Type" 
              content="text/html; charset=iso-8859-1" />
      <title>DSO Explanation</title>
      <style type="text/css">
       <!--
        .style1 {
            color: #FFFFFF;
            font-weight: bold;
        }
       -->
      </style>
    </head>
    
    <script>
    function ld_equip()
    {
       var doc=nb_equip.XMLDocument;
       doc.load("equip.xml");
       document.getElementById("head_id").innerHTML=
                                  "Equipment Details "; 
    
    }
    function ld_eng()
    {
       var doc_s=ds_staff.XMLDocument;
       doc_s.load("details.xml");
       document.getElementById("head_id_d").innerHTML=
                                        "Staff Details "; 
    }
    
    </script>
    <XML id="nb_details" src="details.xml"></XML>
    <object id="nb_equip" 
       CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
       width="0" height="0"></object>
    
    <object id="ds_staff" 
       CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
       width="0" height="0"></object>
    
    <body>
    <table width="80%" border="1" align="center" cellspacing="2">
    
        <tr bgcolor="#FF6699">
            <td colspan="2">
                <table width="80%" datasrc="#nb_details" border="1" 
                       align="center" bordercolor="#FFFFFF">
                    <caption>
                        <span class="style1">Engineer Details </span>
                    </caption>
                    <thead>
                        <tr>
                            <th>name </span></th>
                            <th>city </span></th>
                            <th>state </span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span datafld="name"> </span></td>
                            <td><span datafld="city"> </span></td>
                            <td><span datafld="state"> </span></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    
        <tr bgcolor="#669999">
            <td height="35" colspan="2">
                <table width="80%" border="1" align="center" 
                       bordercolor="#FFFFFF" id=nbbeq datasrc="#nb_equip" >
                    <caption>
                        <span class="style1" id="head_id"> </span>
                    </caption>
                    <tr>
                        <td><span datafld="name"> </span></td>
                        <td><span datafld="rate"> </span></td>
                        <td><span datafld="manufacturer"> </span></td>
                    </tr>
                </table>
            </td>
        </tr>
    
        <tr bgcolor="#669999">
            <td height="35" colspan="2">
                <table width="80%" border="1" align="center" 
                       bordercolor="#FFFFFF" id="nb_staff" datasrc="#ds_staff" >
                    <caption>
                        <span class="style1" id="head_id_d"> </span>
                    </caption>
                    
                    <tr>
                        <td><span datafld="name"> </span></td>
                           <td><span datafld="city"> </span></td>
                        <td><span datafld="state"> </span></td>
                    </tr>
                    
                </table>
            </td>
        </tr>
    
        <tr>
            <td><label>
                <div align="center">
                    <input type="button" name="Button" 
                      value="Staff Details" onclick="ld_eng();" />
                </div>
            </label></td>
            <td><div align="center">
                <input type="button" name="Button2" 
                    value="Equipment Details" onclick="ld_equip()"/>
            </div></td>
        </tr>
    </table>
    </body>
</html>

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

newbegin
Software Developer (Senior) Disney Worldwide Services
United States United States
Rich development experience in Internet/Intranet based applications using Dot net C# , ASPX , ASP, MS SQL Server,AJAX, JavaScript,HTML,XML,CSS.

Comments and Discussions

 
GeneralFirefox and Opera Pinmemberthompa7-Jan-08 12:54 
GeneralRe: Firefox and Opera PinmemberMayur Nirmal12-Apr-11 21:16 
GeneralRe: Firefox and Opera PinmemberBenjamin Bruno20-Jul-11 20:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140821.2 | Last Updated 17 Oct 2005
Article Copyright 2005 by newbegin
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid