Search through XML file and return matches

hey all-

this is my first post in here, so hello to you all and thanks for taking the time to check out what i've to say.

this is also my first time to use javascript in any real capacity in a project. here's the background: i'm helping a client weed out some issues they've been having with some of their services, the way we're going about it is by having a record of all the employees and some info about them in an xml file, then having the feature of searching by name, check amount, and check id number. the hope is to eliminate some counterfeit checks that have been made lately.

so, i've got the javascript parsing the xml and writing it to the screen, but the search feature (which is in the html) is then gone because the document.write() function.

i had tried using getElementById('divName').innerHTML to fill in the screen with the parsed data, but it never showed up on screen, although it did in fact look to be working correctly when i had an alert show what was being written in the innerHTML.

here's the current code:

<script type="text/javascript">

var xmlDoc;

function loadXML(){
//load xml file
// code for IE
if (window.ActiveXObject){
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("payroll.xml");
setupXML();
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument){
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("payroll.xml");
xmlDoc.async=false;
xmlDoc.onload = setupXML;
}else{
alert('Your browser cannot handle this script');
}
}

function setupXML(){
//set variables to equal the right data
employees = xmlDoc.getElementsByTagName('employee');
employeeFirst = xmlDoc.getElementsByTagName('first');
employeeLast = xmlDoc.getElementsByTagName('last');
checkId = xmlDoc.getElementsByTagName('checkId');
checkAmt = xmlDoc.getElementsByTagName('checkAmt');
//
//run through the XML file, grab the data in the various
//arrays and then throw it down in the HTML after creating space for it
//
//write the html to put junk in there
//
var firstHalfDiv = "<table> \n <tr> \n <div id='DivWrapsHolder'>\n";
var lastHalfDiv = "</div> \n </tr> \n </table> \n";
document.write(firstHalfDiv);
for(i=0;i<employees.length;i++){
//
//populate the newly created table cells
//
document.write("<div id='DivWrapper_"+i+"' style='font-family:Arial, Helvetica, sans-serif;'>");
document.write("<table> \n\n");
document.write("<tr> \n");
document.write("<td id='FirstName_"+i+"'> \n <p>"+employeeFirst[i].firstChild.nodeValue+"</p>\n");
document.write("</td> \n");
document.write("<td id='LastName_"+i+"'> \n <p>"+employeeLast[i].firstChild.nodeValue+"</p>\n");
document.write("</td> \n");
document.write("<td id='CheckAmt_"+i+"'> \n <p>"+checkAmt[i].firstChild.nodeValue+"</p>\n");
document.write("</td> \n");
document.write("<td id='CheckId_"+i+"'> \n <p>"+checkId[i].firstChild.nodeValue+"</p>\n");
document.write("</td> \n");
document.write("</tr> \n");
document.write("</table> \n\n");
document.write("</div> \n\n");
}
document.write(lastHalfDiv);
}

</script>


also, the page never totally loads after it writes those xml values, it just seems stuck. i'm not sure if it's because i've incorrectly tried to implement the asynchronous part of things or not.

thanks for any help!!

john

You should be able to use innerHTML
....
....
employees = xmlDoc.getElementsByTagName('employee');
employeeFirst = xmlDoc.getElementsByTagName('first');
employeeLast = xmlDoc.getElementsByTagName('last');
checkId = xmlDoc.getElementsByTagName('checkId');
checkAmt = xmlDoc.getElementsByTagName('checkAmt');
var firstHalfDiv = "<div id='DivWrapsHolder'>\n<table>\n<tbody>\n<tr>\<td>\n";
var HTML='', lastHalfDiv = "</div>\n</td>\n</tr>\n</tbody>\n</table>\n";
for(var i=0;i<employees.length;i++){
HTML += "<div id='DivWrapper_"+i+"' style='font-family:Arial, Helvetica, sans-serif;'>\n";
HTML += "<table>\n<tbody>\n<tr>\n<td id='FirstName_"+i+"'>\n<p>"+employeeFirst[i].firstChild.nodeValue+"</p>\n</td>\n";
HTML += "<td id='LastName_"+i+"'>\n<p>"+employeeLast[i].firstChild.nodeValue+"</p>\n</td>\n";
HTML += "<td id='CheckAmt_"+i+"'>\n<p>"+checkAmt[i].firstChild.nodeValue+"</p>\n</td>\n";
HTML += "<td id='CheckId_"+i+"'>\n<p>"+checkId[i].firstChild.nodeValue+"</p>\n</td>\n</tr>\n</tbody>\n</table>\n</div>\n\n";
}
document.getElementById('content').innerHTML=firstHalfDiv+HTML+lastHalfDiv;
}
</script>

<div id="content"></div>

thanks for the help man. what i ended up doing, however was this:

function setupXML(){
//set variables to equal the right data
employees = xmlDoc.getElementsByTagName('employee');
employeeName = xmlDoc.getElementsByTagName('name');
checkId = xmlDoc.getElementsByTagName('checkId');
checkAmt = xmlDoc.getElementsByTagName('checkAmt');
//-----
//CREATE TABLE TO POPULATE WITH DATA
var divwrap = document.createElement('div');
divwrap.setAttribute('id','TableHolder');
var newtable = document.createElement('table');
//----populate-----//
for(i=0;i<employees.length;i++){
var tablerow = document.createElement('tr');
//employee's name junks
var tdName = document.createElement('td');
tdName.setAttribute('id','EmployeeName_'+i);
tdName.innerHTML = employeeName[i].firstChild.nodeValue;
tdName.setAttribute('align','left');
tdName.style.paddingRight = 55;
tablerow.appendChild(tdName);
//check amount junks
var tdAmount = document.createElement('td');
tdAmount.setAttribute('id','CheckAmt_'+i);
tdAmount.innerHTML = checkAmt[i].firstChild.nodeValue;
tablerow.appendChild(tdAmount);
//check id junks
var tdId = document.createElement('td');
tdId.setAttribute('id','CheckId_'+i);
tdId.innerHTML = checkId[i].firstChild.nodeValue;
tablerow.appendChild(tdId);
//put it all together
newtable.appendChild(tablerow);
divwrap.appendChild(newtable);
}
//shabam onto the page
document.body.appendChild(divwrap)
}



my new dilemma is in the searching of the data. i have the data being parsed and displayed now. i have some search fields, and they all work, causing whatever matches with the search to be displayed whilst everything else disappears. BUT, i can't get all those searches to work simultaneously. i have to comment out search #1 & 3 in order for search #2 to work.

so i'm playing around with that. here's the code thus far:

First:&nbsp;<input type="text" name="FirstNameFilter" id="FirstNameFilter"><br />
Last:&nbsp;<input type="text" name="LastNameFilter" id="LastNameFilter"><br />
Check Amount:&nbsp;<input type="text" name="AmountFilter" id="AmountFilter"><br />
Check Id:&nbsp;<input type="text" name="IdFilter" id="IdFilter"><br />

<input name="FilterIt" type="button" id="FilterIt" onclick="ApplyFilter();" value="Search">
<br />
<br />

<script language="javascript" type="text/javascript">
function ApplyFilter(){
var _FirstFilter = document.getElementById('FirstNameFilter').value.toLowerCase();
var _LastFilter = document.getElementById('LastNameFilter').value.toLowerCase();
var _AmountFilter = document.getElementById('AmountFilter').value.toLowerCase();
var _IdFilter = document.getElementById('IdFilter').value.toLowerCase();
for(i=0;i<employees.length;i++){
//alert(document.getElementById('FirstName_'+i).innerHTML);//.toString().toLowerCase().indexOf(_FirstFilter));
/*if(document.getElementById('EmployeeName_' + i).innerHTML.toString().toLowerCase().indexOf(_FirstFilter) >=0) {
document.getElementById('EmployeeName_' + i).parentNode.style.visibility = 'visible';
}else {
document.getElementById('EmployeeName_' + i).parentNode.style.visibility = 'hidden';
}*/
/*if(document.getElementById('EmployeeName_' + i).innerHTML.toString().toLowerCase().indexOf(_LastFilter) >=0) {
document.getElementById('EmployeeName_' + i).parentNode.style.visibility = 'visible';
}else{
document.getElementById('EmployeeName_' + i).parentNode.style.visibility = 'hidden';
}*/
/*if(document.getElementById('CheckAmt_'+i).innerHTML.toString().toLowerCase().indexOf(_AmountFilter) >=0) {
document.getElementById('CheckAmt_'+i).parentNode.style.visibility = 'visible';
} else {
document.getElementById('CheckAmt_'+i).parentNode.style.visibility = 'hidden';
}*/
if(document.getElementById('CheckId_'+i).innerHTML.toString().toLowerCase().indexOf(_IdFilter) >=0) {
document.getElementById('CheckId_'+i).parentNode.style.visibility = 'visible';
} else {
document.getElementById('CheckId_'+i).parentNode.style.visibility = 'hidden';
}
}
}

</script>


thanks for the help!