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:


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

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.

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.

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!