Back
Next
In
XML Data Island we learn that how to display an entire XML external document by
HTML table. For this purpose we first created an ID with <xml> tag
and bound an external XML document by "datasrc" attribute of table element.
Suppose we need to display only a single record instead of the entire XML
document then we have <span> and <div> both tags in
HTML, these both have
"datasrc" and "datafld" attributes. So with these attributes we can bound
any external document and retrieve a single record. Suppose we have the below
XML document.
XML for JavaScript Example
<?xml version="1.0" encoding="ISO-8859-15"?>
<globalGuideLine>
<employee>
<FirstName>Austin</FirstName>
<LastName>Hennery</LastName>
<gender>m</gender>
</employee>
<employee>
<FirstName>Angela</FirstName>
<LastName>Julie</LastName>
<gender>f</gender>
</employee>
--------
--------
</globalGuideLine>
Suppose on above XML code we need to display a single record of employee then we can use this way.
Display XML Data using HTML SPAN Tag
<xml id="employees_xml" src="employee.xml" async="false"></xml>
FirstName = <span datasrc="#employees_xml" datafld="FirstName"></span><br>
LastName = <span datasrc="#employees_xml" datafld="LastName"></span>
If
you are using Mozilla Firefox or other browsers except Microsoft Internet
Explorer
then the output for some examples could not visible but when you try to view
source you can see the entire Source for that example and to get full out put we
recommend you to please view these examples in Microsoft Internet Explorer and
it is better to use IE version 5.5 or 6 is recommended for the best output.
View
the out put for the above HTML SPAN Tag using to show XML Data.
Below
is the same code for HTML <div> Tag and with the help of HTML div tag we can also retrieve XML data
but here again one hurdle is that we can only view a single record and to
overcome this hurdle we need some Java Script to navigate in XML document
records. View the output
of HTML DIV Tag.
Display XML Data using HTML DIV Tag
<xml id="employees_xml" src="employee.xml" async="false"></xml>
FirstName = <div datasrc="#employees_xml" datafld="FirstName"></div><br>
LastName = <div datasrc="#employees_xml" datafld="LastName"></div>
Example of JavaScript showing XML document.
To navigate between the all records in Employees.xml forward and previous
we will use the below Java Script.
<script type="text/javascript">
function nextEmployee()
{
emp=employees_xml.recordset
if (emp.absoluteposition < emp.recordcount)
{
emp.movenext()
}else{
alert("This is the Last Record, can't go to next
more...");
}
}
function previousEmployee()
{
emp=employees_xml.recordset
if (emp.absoluteposition > 1)
{
emp.moveprevious()
}else{
alert("This is the First Record, can't go to previous
more...");
}
}
</script>
On the above Java Script code
in XML Tutorial we can see how to navigate in between the XML elements. The complete
example of
XML with java script is just away from a single click!
Back
Next
| 
Home 