Simple HTML markup in XML file??

[lilqhgal]

I have an javascript that generates a sort of "listing" page (which I'm using for faculty for a college dept) and the listing is an xml file. One of the fields is for the person's "bio" but some of their bios are quite large with spaces, paragraphs, some <b> bold tags and hard returns and so forth. I tried inserting them into the XML file but that breaks the code. Any way to add simple html code markup into my xml file? Thanks!

[Charles]

You have two options.

The best is to parse the HTML as HTML and export it as XHTML. XHTML is XML.

The cheat is to designate the HTML as CDATA. <some:xml-element>
<![CDATA[
<p>foo<br>bar</p>
]]>
</some:xml-element>

[lilqhgal]

Hi Charles, my DOCTYPE is XHTML Strict so does that mean I'm already running XHTML? If so, what would be the correct way to parse it? (Sorry for the noob questions!) In the mean time I'll play with the cheat.

[Charles]

How is the HTML getting in to the XHTML? If you are typing it then just type it as XML. If you are "merging" it with some program then you will need to add the parsing as a step along the way. How you parse it will depend upon how you are doing the merge.

[lilqhgal]

Thanks again.

Well, There is an html page (I say html because that's the extension, do I need to change that to .xhtml? - even tho the doctype states xhtml...) That calls a javascript which pulls the XML data and then displays in a div when clicking the link.

Here's the javascript:

<!--
/*
Who'sWho? - people / employee renderer v1.0, by Martin Latter (2004) ~ http://www.copysense.co.uk/
This application was developed for an intranet system - quickness in sorting, not data security.
Thanks to Alex Vincent for the function cleanWhiteSpace() - for Gecko browsers.
innerHTML used for fast rendering speed with big lumps of data (see http://www.quirksmode.org/).

This application is licensed under the Creative Commons License Attribution 2.0 License (http://creativecommons.org/licenses/by/2.0/) - basically it means you are free to enhance this code to meet your needs but please credit me as the original author; and for any reuse or distribution you need to make clear to others the license terms.
*/


var xmlFile = "faculty.xml";
var imgDir = "faculty-images/"; // directory path for images

/* ************************************************** */

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, dept, position, role, image);
}
}

function person(firstName, lastName, dept, position, role, image)
{
this.firstName = firstName;
this.lastName = lastName;
this.dept = dept;
this.position = position;
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(0);
break;

case 2:
personArr.sort(sortLname);
displayPeople(0);
break;

case 3:
personArr.sort(sortDept);
displayPeople(1);
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 sortDept(a,b)
{
var x = a.dept.toLowerCase();
var y = b.dept.toLowerCase();
if (x < y) return -1;
else if (x > y) return 1;
else return 0;
}

function displayPeople(n)
{
var numPeople = personArr.length;
var i = 0;
var os = '<p>';
var temp = '';

for (; i< numPeople;i++)
{
if (n)
{
if (personArr[i].dept != temp) os += '<strong>' + personArr[i].dept + '<\/strong>';
temp = personArr[i].dept;
}

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="" class="person"><br>';
}

os += '<em>' + personArr[n].dept + '<\/em><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('displayPeople()', 100);
}

window.onload = init;

and here is my XML file:

<?xml version="1.0" encoding="iso-8859-1" ?>

<people>
<person>
<fname>Jim</fname>
<lname>Amon</lname>
<position>position</position>
<dept>dept</dept>
<role><![CDATA[
<p><strong>James P. Amon <br>
</strong>Associate Professor <br>
Ph.D., 1974, William and Mary in Virginia </p>
<p>FIRST PARAGRAPH IN BIO FOR AMON</p>
]]> </role>
<image>pic.jpg</image>
</person>
<person>
<fname>Larry</fname>
<lname>Arlian</lname>
<position>position</position>
<dept>dept</dept>
<role>bio</role>
<image>pic.jpg</image>
</person>
</people>

<!--
<person>
<fname></fname>
<lname></lname>
<position></position>
<dept>Editorial</dept>
<role></role>
<image>.jpg</image>
</person>
-->