Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:
    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

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    You should be able to use innerHTML
    Code:
    ....
    ....
    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>
    Last edited by rwedge; 08-16-2007 at 05:46 AM.

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the help man. what i ended up doing, however was this:
    Code:
    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:
    Code:
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •