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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript call XML data to 2 different locations?

    I have a script that calls some data from an XML file. The html page is split into a left column (<div id="indexWin1">) and a right main area(<div id="personWin1">). The script calls the info into the indexWin1 div on page load. I would like to know how to get the script to ALSO pull some info so that I can display data from the xml file in the personWin1 div as well. Here is the script:

    Code:
    var personArr = new Array();
    
    function loadXML()
    {
    	var xmlDoc;
    
    	try
    	{
    		if (window.ActiveXObject)
    		{
    			xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
    			xmlDoc.onreadystatechange = function() { if (xmlDoc.readyState==4) grabPeopleData(xmlDoc, 0); }
    			xmlDoc.load(xmlFile);
    		}
    
    		else if (document.implementation && document.implementation.createDocument)
    		{
    			xmlDoc = document.implementation.createDocument('','doc',null);
    			xmlDoc.onload = function() { grabPeopleData(xmlDoc, 1); }
    			xmlDoc.load(xmlFile);
    		}
    
    		else alert('Sorry, this browser is not XML-compliant and cannot render the XML data.');
    	}
    
    	catch(e)
    	{
    		alert ('There was an error (' + e + ') attempting to load the XML document');
    	}
    }
    
    function grabPeopleData(xmldoc, f)
    {
    	var i = 0;
    	var people = xmldoc.getElementsByTagName('people')[0];
    
    	if (f) cleanWhiteSpace(people);
    	// Alex Vincent's cleanWhiteSpace function is a slow method (other methods are twice+ as fast), but it's neat and highly suitable in situations like this where users may want to alter the XML nodes being parsed.
    
    	var firstName = '', lastName = '', position = '',  dept = '', role = '', image = '';
    	var numPeople = people.childNodes.length;
    
    	for (; i < numPeople; i++)
    	{
    		firstName = people.childNodes[i].childNodes[0].firstChild.nodeValue;
    		lastName = people.childNodes[i].childNodes[1].firstChild.nodeValue;
    		position = people.childNodes[i].childNodes[2].firstChild.nodeValue;
    		dept = people.childNodes[i].childNodes[3].firstChild.nodeValue;
    		role = people.childNodes[i].childNodes[4].firstChild.nodeValue;
    		image = people.childNodes[i].childNodes[5].firstChild.nodeValue;
    
    		personArr[i] = new person(firstName, lastName, position, dept, role, image);
    	}
    }
    
    function person(firstName, lastName, position, dept, role, image)
    {
    	this.firstName = firstName;
    	this.lastName = lastName;
    	this.position = position;
    	this.dept = dept;
    	this.role = role;
    	this.image = image;
    }
    
    function cleanWhiteSpace(node)
    {
    	// function by Alex Vincent
    
    	var notWS = /\S/;
    	var cN, i;
    
    	for (i=0; i< node.childNodes.length; i++)
    	{
    		cN=node.childNodes[i];
    
    		if ((cN.nodeType == 3) && (!notWS.test(cN.nodeValue)))
    		{
    			node.removeChild(node.childNodes[i]);
    			i--;
    		}
    
    		if (cN.nodeType == 1) cleanWhiteSpace(cN);
    	}
    }
    
    function sortit(n)
    {
    	switch (n)
    	{
    		case 1:
    			personArr.sort(sortFname);
    			displayPeople();
    			break;
    
    		case 2:
    			personArr.sort(sortLname);
    			displayPeople();
    			break;
    	}
    }
    
    function sortFname(a,b)
    {
    	var x = a.firstName.toLowerCase();
    	var y = b.firstName.toLowerCase();
    	if (x < y) return -1;
    	else if (x > y) return 1;
    	else return 0;
    }
    
    function sortLname(a,b)
    {
    	var x = a.lastName.toLowerCase();
    	var y = b.lastName.toLowerCase();
    	if (x < y) return -1;
    	else if (x > y) return 1;
    	else return 0;
    }
    
    function displayPeople(depstr)
    {
    	var numPeople = personArr.length;
    	var i = 0;
    	var os = '<p>';
    	var temp = '';
    
    	if (!depstr)
    	{
    		for (; i< numPeople; i++)
    		{
    			os += '<a href="javascript:personDisplay('+i+')" class="personlink">' + personArr[i].firstName + ' ' + personArr[i].lastName + '<\/a>';
    		}
    	}
    
    	else
    	{
    		// sortit(2);
    	
    		for (; i< numPeople; i++)
    		{
    			if (personArr[i].dept == depstr)
    			{
    				os += '<a href="javascript:personDisplay('+i+')" class="personlink">' + personArr[i].firstName + ' ' + personArr[i].lastName + '<\/a>';
    			}
    		}
    	}
    
    	os += '<\/p>';
    	document.getElementById('indexWin1').innerHTML = os;
    }
    
    function personDisplay(n)
    {
    	var os = '';
    	os += '<p><strong>' + personArr[n].firstName + ' ' + personArr[n].lastName + '<\/strong><br>';
    	os += '<em>' + personArr[n].position + '<\/em><br>';
    
    	if (personArr[n].image.indexOf(".") > 1)
    	{
    		os += '<img src="' + imgDir + personArr[n].image + '" alt="' + personArr[n].firstName + ' ' + personArr[n].lastName + '"><br>';
    	}
    
    	os += personArr[n].role;
    	os += '<\/p>';
    	document.getElementById('personWin1').innerHTML=os;
    }
    
    function retern()
    {
    	document.getElementById('indexWin1').style.visibility='visible';
    	document.getElementById('personWin1').style.visibility='visible';
    }
    
    function extwin(f)
    {
    	document.getElementById('indexWin1').style.height = h + 'px';
    	document.getElementById('personWin1').style.height = h + 'px';
    }
    
    function init()
    {
    	loadXML();
    	window.setTimeout('sortit(2)', 500);
    }
    
    window.onload = init;
    Thanks tons!!!
    Last edited by lilqhgal; 11-01-2006 at 07:07 PM. Reason: edited for bad vbcode lol

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    i would create an array with one value for what is to be displayed on the left, and another value with what is to be displayed on the right. then insert the xml data into the divs from each respective array value.
    var content=new Array('','');
    content[0]=do your thing for div1
    content[1]=do your thing for div2



    I am confused as to why you ask this.
    Last edited by brandonH; 11-02-2006 at 04:29 AM. Reason: typo
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    i would also reccomend that you use:
    document.getElementById('personWin1').style.display='none'; (to hide)
    document.getElementById('personWin1').style.display='block'; (to show)
    instead of:
    document.getElementById('personWin1').style.visibility='visible';
    style.display=none/block is cross browser friendly where as style.visibility isnt.
    not all browsers take the values visible/hidden.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Brandon, thanks for your suggestions! I will see what I can accomplish with this. Also thanks for the headsup on the visibility thing. I am trying to display the same data in two different areas in two different formats. Beats me having to make a table of the same data by hand. (what the client wants the client gets right?) Thanks again for all your help so far!


  •  

    Posting Permissions

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