grabbing HTML from within XML

[joe_doufu]

Hi, old web developer, new to Ajax and XML here.
I'm developing an application that grabs an XML file from a (PHP) web
service. In fact, it's going to be an online game. When the user
clicks a map location it accesses a service that provides information
about that location in a form something like this:

<maplocation locID="###" picturesrc="image.jpg">
<name>...</name>
<breadcrumbs>...</breadcrumbs>
<description>...</description>
</maplocation>

The problem for me is the <description> element. If the writers give
me a plain text description, fine, I can insert it into my web page's
DOM with the innerHTML property of an existing <span> tag or whatever.

However, I want my descriptions to be able to contain HTML (thus the
<description> node may have an unknown number of child nodes) which
then gets inserted into the DOM. I can't figure out how to do it.
I've tried wrapping the description in a <div> tag, like this:

<maplocation>
<description>
<div>
this is the most <i>interesting</i> location in the game...
</div>
</description>
</maplocation>

I tried grabbing it with the firstChild property of my <description>
element, and using appendChild() to stick it in a <div> in the DOM,
but it doesn't work. I've checked the nodeName property and made sure
what I was grabbing was the "div", but nothing appears on my page.
How can I achieve this?

 

[joe_doufu]

Hi, old web developer, new to Ajax and XML here.

Silly me, I tell you I'm a long-time web developer and then pull a
newbie trick like forgetting to tell you what browser I'm testing in!
(It's IE 6)

 

[RobG]

Hi, old web developer, new to Ajax and XML here.
I'm developing an application that grabs an XML file from a (PHP) web
service. In fact, it's going to be an online game. When the user
clicks a map location it accesses a service that provides information
about that location in a form something like this:

<maplocation locID="###" picturesrc="image.jpg">
<name>...</name>
<breadcrumbs>...</breadcrumbs>
<description>...</description>
</maplocation>

The problem for me is the <description> element. If the writers give
me a plain text description, fine, I can insert it into my web page's
DOM with the innerHTML property of an existing <span> tag or whatever.

However, I want my descriptions to be able to contain HTML (thus the
<description> node may have an unknown number of child nodes) which
then gets inserted into the DOM. I can't figure out how to do it.
I've tried wrapping the description in a <div> tag, like this:

<maplocation>
<description>
<div>
this is the most <i>interesting</i> location in the game...
</div>
</description>
</maplocation>

I tried grabbing it with the firstChild property of my <description>
element, and using appendChild() to stick it in a <div> in the DOM,
but it doesn't work. I've checked the nodeName property and made sure
what I was grabbing was the "div", but nothing appears on my page.
How can I achieve this?

Markup the HTML using a CDATA section:

<maplocation>
<description>
<![CDATA[
<div>
this is the most <i>interesting</i> location in the game...
</div>
]]>
</description>
</maplocation>

<URL: http://www.w3.org/TR/xml/#sec-cdata-sect >


You might find it faster to use JSON, which is XML-ish but can be
turned directly into a javascript object so you can access its
properties and values:

<URL: http://www.json.org/ >

 

[joe_doufu]

Markup the HTML using a CDATA section:

<maplocation>
<description>
<![CDATA[
<div>
this is the most <i>interesting</i> location in the game...
</div>
]]>
</description>
</maplocation>

Thanks for the pointer! It worked fine in IE 6, but there was a
problem with Firefox. FF decided that the CDATA object wasn't the
"firstChild" node of the <description>, in fact the firstChild was a
text node full of whitespace. It works in both browsers when I drop
the whitespace as in:

<description><![CDATA[
blah blah blah
]]></description>

 

[Darko]

Markup the HTML using a CDATA section:

<maplocation>
<description>
<![CDATA[
<div>
this is the most <i>interesting</i> location in the game...
</div>
]]>
</description>
</maplocation>

Thanks for the pointer! It worked fine in IE 6, but there was a
problem with Firefox. FF decided that the CDATA object wasn't the
"firstChild" node of the <description>, in fact the firstChild was a
text node full of whitespace. It works in both browsers when I drop
the whitespace as in:

<description><![CDATA[
blah blah blah
]]></description>

Why don't you just escape the html and put it to the description tag
as plain text - &lt;div&gt;some text&lt;/div&gt; In this way it will
all be just one child, no need for CDATA, and every browser will work
the same. When you get it, if the browser doesn't automatically
unescape the <>&"' signs, you can do it manually, with replace etc.
Then you can put it to the innerHTML property.

 

[orin]

How about using a "filter":

myVars = myXML.childNodes;

function myFunc() {
for (i=0; i<=myVars.length-1; i++) {
if (myVars.nodeType = 3) { // element node = type 3
// your function here
}
}
}

or similar. I forget the original code but it was actually explained
in an article in developer.mozilla.org. Note that the Firefox case is
not a bug/quirk. Indeed, it's IE's quirk that the trailing whitespaces
after the <description> element don't take any account.

===============================================================

Markup the HTML using a CDATA section:

<maplocation>
<description>
<![CDATA[
<div>
this is the most <i>interesting</i> location in the game...
</div>
]]>
</description>
</maplocation>

Thanks for the pointer! It worked fine in IE 6, but there was a
problem with Firefox. FF decided that the CDATA object wasn't the
"firstChild" node of the <description>, in fact the firstChild was a
text node full of whitespace. It works in both browsers when I drop
the whitespace as in:

<description><![CDATA[
blah blah blah
]]></description>