XML with java script, XML Tutorial, Global Guideline

Bookmark Bookmark: XML with java script, XML Tutorial
Forum | Blog


      Home                    

Basic XML Guide.       
 XML Introduction.       
 XML Tags Guide.       
 XML Attributes.           
 XML Syntax Guide.    
 XML Compilation.      
 XML Execution.          
 XML with CSS.           
 XML with XSL.            
 XML Data Island.        
 XML Professional.       
 XML with JavaScript. 
 XML Namespaces.      
 XML CDATA.              
 XML Editors.               
 XML Summary.           

XML Tutorial >> XML with JavaScript.


     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     
 

[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 227 visitors are online now