Forum:

HTML Pages with CSS and JavaScript

Converting an XML document to HTML using Javascript and HTML

Greenhorn

Posts: 19

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

I need to convert an XML document to HTML using Javascript and HTML?
Could any of you point me in the right direction?

Thanks
Alex

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Well you could use XSLT and not use HTML and JavaScript.

How are you getting the XML Document, through Ajax?

Eric

solomon alexander

Greenhorn

Posts: 19

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

My requirement is to keep the XML file locally in my machine.
Then to use javascript to load the XML and search for a text field and display the record in HTML
Could you point me in the right direction?

Solomon

Saifuddin Merchant

Ranch Hand

Posts: 608

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric is right you might XSLT to work out fine for you requirements.

Read up -> http://www.w3schools.com/xsl/xsl_client.asp
More information on XSLT --> http://www.w3schools.com/xsl/

HTH

Cheers - Sam.
Twisters - The new age Java Quiz || My Blog

solomon alexander

Greenhorn

Posts: 19

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

I got your point.
But to be more precise on what I am looking for.
I will have an HTML form having 3 fields : Title , Artist and Country.
When I enter data into these fields , it should search against the XML and display into the screen.
I am doing some proof of concept on this, meanwhile if you guys have any hint, please provide.

Thanks
Solomon

Eric Pascarello

author

Posts: 15385

posted 16 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

JavaScript can not read local XML files do to security restrictions. The file has to live on the server for it to be read.

Eric

solomon alexander

Greenhorn

Posts: 19

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

Please find below the code to perform the task:

<html>
<head>
<title>Searching for text strings in an XML document</title>

function search_Tree() {
  var e_values   = '';
  var title = document.all.title.value;
  var artist = document.all.artist.value;
  var country = document.all.country.value;
  var company = document.all.company.value;
  var price = document.all.price.value;
  var year = document.all.year.value;

objXMLDoc = document.getElementById("CDCatalog").XMLDocument;     //get XML Doc
  theRoot = objXMLDoc.documentElement;
  namedNodes = theRoot.getElementsByTagName("TITLE");
  var match = 'Y';

for ( i = 0; i < namedNodes.length; i++) {
       if ( namedNodes(i).childNodes(0) != null ) {
         thisNode = namedNodes(i).childNodes(0).nodeValue;
         if ( (title == '') || (thisNode.indexOf(title) != -1) ) {
           e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
         } else {
         e_values = '';
		match = 'N';
         }
       }
   }
   namedNodes = theRoot.getElementsByTagName("ARTIST");
    for ( i = 0; i < namedNodes.length; i++) {
          if ( namedNodes(i).childNodes(0) != null ) {
            thisNode = namedNodes(i).childNodes(0).nodeValue;
            if ( (artist == '') || (thisNode.indexOf(artist) != -1) ) {
              e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
            } else {
            e_values = '';
		match = 'N';

}
          }
   }
    namedNodes = theRoot.getElementsByTagName("COUNTRY");
       for ( i = 0; i < namedNodes.length; i++) {
             if ( namedNodes(i).childNodes(0) != null ) {
               thisNode = namedNodes(i).childNodes(0).nodeValue;
               if ( (country == '') || (thisNode.indexOf(country) != -1) ) {
                 e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
               } else {
               e_values = '';
			match = 'N';

}
             }
   }
    namedNodes = theRoot.getElementsByTagName("COMPANY");
       for ( i = 0; i < namedNodes.length; i++) {
             if ( namedNodes(i).childNodes(0) != null ) {
               thisNode = namedNodes(i).childNodes(0).nodeValue;
               if ( (company == '') || (thisNode.indexOf(company) != -1) ) {
                 e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
               } else {
               e_values = '';
			match = 'N';

}
             }
   }
    namedNodes = theRoot.getElementsByTagName("PRICE");
       for ( i = 0; i < namedNodes.length; i++) {
             if ( namedNodes(i).childNodes(0) != null ) {
               thisNode = namedNodes(i).childNodes(0).nodeValue;
               if ( (price == '') || (thisNode.indexOf(price) != -1) ) {
                 e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
               } else {
               e_values = '';
			match = 'N';

}
             }
   }
    namedNodes = theRoot.getElementsByTagName("YEAR");
       for ( i = 0; i < namedNodes.length; i++) {
             if ( namedNodes(i).childNodes(0) != null ) {
               thisNode = namedNodes(i).childNodes(0).nodeValue;
               if ( (year == '') || (thisNode.indexOf(year) != -1) ) {
                 e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
               } else {
               e_values = '';
			match = 'N';

}
             }
   }
	if (match == 'Y') {
divResults.innerHTML = e_values;
		} else {
divResults.innerHTML = '';
}

}

</SCRIPT>
</head>

<body>
<XML ID="CDCatalog" SRC="CDCatalogue.xml"></XML>
Search the entire tree for nodes that match a search string  <P>

Title:   <INPUT TYPE="TEXT" NAME="title">
 Artist:   <INPUT TYPE="TEXT" NAME="artist">
 Country:   <INPUT TYPE="TEXT" NAME="country">
 Company:   <INPUT TYPE="TEXT" NAME="company">
 Price:   <INPUT TYPE="TEXT" NAME="price">
 Year:   <INPUT TYPE="TEXT" NAME="year">

I m able to read an xml file using javascript, now in the process of refining the filter.
Please let me know,if i m doin anything wrong.

Solomon

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

document.all is a MAJOR NO NO. That is depreciated IE only code and will fail in any browser other than IE.

Also when you post code, please use code tags so it is readable.

Eric

solomon alexander

Greenhorn

Posts: 19

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

Please see the below XSLT code:

<html>
<head>
<script>
function loadXMLDoc(fname)
{
  var xmlDoc;
  // code for IE
  if (window.ActiveXObject)
  {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
  // code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation
  && document.implementation.createDocument)
  {
    xmlDoc=document.implementation.createDocument("","",null);
   }
  else
  {
    alert('Your browser cannot handle this script');
  }
xmlDoc.async=false;
xmlDoc.load(fname);
return(xmlDoc);
}

Could you let me know, how can i perform a search based on criteria. In other words, I want to filter data dynamically based on form data.
Any Hint would be highly appreciated.

Thanks
Solomon

solomon alexander

Greenhorn

Posts: 19

posted 16 years ago