Help with XML, HTML

Xperia124 · 04-03-2012, 10:01 AM

Hi everyone,

I am really new to XML and HTTP and I am trying to write a code compatible to browsers such as Firefox, Chrome and Safari. The HTML is to search an XML file looking for an specific value (inputted time). Once that is found, all consecutive entries are stored and displayed in a table. So far this is what I achieved however I am having trouble making it work. Any help/advice/comment would be very much appreciated.

Thank you!

Carl.

XML File: (data.xml)

Code:

<?xml version="1.0"?>


<SYSTEM_FY>


<ST
  ST="12:59:00" VAL="149.99">
</ST>

<ST
  ST="12:59:15" VAL="200">
</ST>

<ST
  ST="12:59:30" VAL="149.958">
</ST>

<ST
  ST="12:59:45" VAL="250">
</ST>

<ST
  ST="13:00:00" VAL="149.962">
</ST>

<ST
  ST="13:00:15" VAL="149">
</ST>

<ST
  ST="13:00:30" VAL="150.024">
</ST>

</SYSTEM_FY>

HTML file (searchfy.html):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Search</title>
<script type="text/javascript">


window.onload = loadIndex;

function loadIndex() {

    if (window.XMLHttpRequest)
            {
             xmlDoc=new XMLHttpRequest();
            }
        else
            {
             xmlDoc=new ActiveXobject("Microsoft.XMLHTTP");
            }
         xmlDoc.open("GET",data.xml,false);
         xmlDoc.send();
         return xmlDoc.responseXML;
        }



function searchIndex() { // search the index
   
        loadIndex();
   
    var searchterm = document.getElementById("searchme").value;
    var allitems = xmlDoc.getElementsByTagName("ST");
        results = new Array;
    if (searchterm.length < 6) {
        alert("Incorrect input");
    }
    else {
// see if the XML entry matches the search term in first loop then once term is found, all consecutive entries are stored in the array to be displayed later
// and (if so) store it in an array        \
        for (var i=0;i<allitems.length;i++) {
            var x = allitems[i];
            var exp = new RegExp(searchterm,"i");
            if ( x.match(exp) != null) {
                for(var j=i;j<allitems.length;j++){
                                       results.push(allitems[j]);
                                       }
            }
        }
// send the results to another function that displays them to the user
    showResults(results);
    }
}



// Write search results to a table
function showResults(results) {

    if (results.length > 0) {
// if there are any results, write them to a table
       
        document.write('<div><a href="searchfy.html">New Search</a></div><br><br>');
        document.write('<table border="1" style="width: 100%;">');
        document.write('<tr><th>ST</th><th>VAL</th></tr>');
        for(var k=0; k<results.length; k++) {
         document.write('<tr>');
         document.write('<td>' + results[k].getAttribute("ST") + '</td>');
         document.write('<td>' + results[k].getAttribute("VAL") + '</td>');
         document.write('</tr>');
        }
        document.write('<table>');
        document.close();
       
       
    } else {
// else tell the user no matches were found
        var notfound = alert('No results found for '+searchterm+'!');
    }
}
</script>

</head><body>
<form name="frmMain" id="frmMain" action="">
<b>Search:&nbsp;&nbsp;</b>

<input id="searchme" type="text" size="20">&nbsp;&nbsp;<br><br>
<input value="Submit (e.g: 12:59:00 or 13:00:00)" onclick="searchIndex(); return false;" type="submit">
</form>

</body>
</html>

Alex Vincent · 04-03-2012, 08:36 PM

Well, document.write after onload will erase your existing document, for starters... did you intend that?

Xperia124 · 04-04-2012, 09:06 AM

@ Alex Vincent: I have removed the document.write which was just a checkpoint. thanks! still doesnt work...

Alex Vincent · 04-16-2012, 08:55 AM

Closing per original poster's request.