JavaScript Forum

**ADAM Web Design** · 10-18-2007, 04:46 PM

Hey everyone,

I'm running into an issue, having just started messing with XML a few months ago. Here's a sample of the XML file:

Code:

<Sample_Tag>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</Sample_Tag>

What I want to do is to import the contents of "Sample_Tag" as HTML and have it outputted (keep in mind that there are multiple Sample_Tags in the document, so simply parsing responseText won't really work in this case). Is there a DOM property (e.g. document.getElementsByTagName("Sample_Tag")[0].property_here) that would do this?

I tried text, but it stripped out the HTML portions. I tried innerText and innerHTML but both came up as "undefined".

What else is there that I can try?

Thanks.

**tripy** · 10-18-2007, 06:17 PM

You could use the XSLT engine embedded in most of the browser.

This shows examples for IE and FF:
http://www.w3schools.com/xml/xml_examples.asp

And those are geared towards FF:
http://developer.mozilla.org/en/docs...ransformations
http://developer.mozilla.org/en/docs/XSLT
http://www.topxml.com/xsl/tutorials/intro/

You could create a simple XSL stylesheet and by associating this with your XML document, it will output the content of the Sample_Tag as html.

I suggest XSLT, as this gives you more flexibility that pure JS scripting, if the content of your Sample_Tag change.

In your case, you will need to do a fragment transformation.
You get a basic example on that page of the mozilla wiki.
http://developer.mozilla.org/en/docs...:Basic_Example

This processe have 1 disadvantage though.
As far as I know, Safari don't have access to any XSLT engine, except if the webkit development package is installed on the mac.
Except for safari, this should work in firefox/ie6/ie7 and opera without a glitch.

Or you could make the transformation on the server and serve back html directly. The procedure should be fairly equivalent.

You can play with xml+xsl directly in your browser, if you want to test it.
I created this XML document from your exemple
1.xml:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xml" href="1.xsl"?>
<root>
  <Sample_Tag>
    <ul>
      <li>List 1</li>
      <li>List 2</li>
    </ul>
  </Sample_Tag>
  <Sample_Tag>
    <ul>
      <li>List 1.1</li>
      <li>List 1.2</li>
    </ul>
  </Sample_Tag>
  <Sample_Tag>
    <ul>
      <li>List 2.1</li>
      <li>List 2.2</li>
    </ul>
  </Sample_Tag>
</root>

And this xsl stylesheet 1.xsl (if you change the names, change the reference to the stylesheet in the xml file too):

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="1.0" encoding="iso-8859-1" indent="yes"/>

  <xsl:template match="/root">
    <html>
      <xsl:apply-templates/>
    </html>
  </xsl:template>
  
  <xsl:template match="Sample_Tag">
    This is a sample tag
    <ul>
      <xsl:for-each select="ul/li">
        <li><xsl:value-of select="."/></li>
      </xsl:for-each>
    </ul>
  </xsl:template>
  
  <xsl:template match="ul">
    <xsl:value-of select="."/>
  </xsl:template>
</xsl:stylesheet>

Put the 2 files in the same directory, and try to open teh xml document in your browser.
It's magic!

**ADAM Web Design** · 10-18-2007, 07:11 PM

Hmm...it's something to mess with at some point, and I'll reference it again in the future.

For now though...I cheated and solved it a different way. Since my list (and my XML page for that matter) was dynamically generated, I simply created some custom tags and let the browsers do the rest.

Thanks, dude.

**Learning Newbie** · 10-18-2007, 07:34 PM

Curiosity, but why are you putting HTML into XML? To me one of the beauties of eXtensible markup language is you can use <Unordered_List> tags instead of <ul> to make it less confusing.

**ADAM Web Design** · 10-18-2007, 08:00 PM

Because ultimately, it needs to be converted to HTML for a Google Maps mashup I'm working on (it's still in demo mode right now, and I can't reveal much about what I'm working on because a lot of the funding is still being worked out, but when it's done I'll show y'alls).

**Learning Newbie** · 10-18-2007, 08:58 PM

I worked on a site a year ago that did XML+XSLT=HTML. At first I thought the designer must have been stupid to have

<Image>
<Alternate_Text>If I had MSIE this would be a tool tip</Alternate_Text>
<Image_File_URL>http://something.com</Image_File_URL>
<Pixel_Width_X />
<Pixel_Height_Y />
</Image>

My gut screamed "Why are they doing all this extra nonsense garbage?" But it was a godsend. Got the project done faster, cheaper, and the customer loved it because instead of us building a form for data entry, they could go straight to the source and make sense of it. One of the big selling points on XML is "human readable" and since you're mroe comfortable in HTML than me <ul> is probably as readable as <Unordered_List>.

Anyway I'm just rambling and sharing some uncommon things I've run into. I kind of do that with the notion that around 10 % of what I say will turn out to be really useful.

**ADAM Web Design** · 10-18-2007, 09:05 PM

10%, eh? You're giving yourself way too much credit.

Seriously, on the one hand I can "kind of" see that, but for this particular application I'm working on the XML page is dynamically generated with four different parameters (for now) and probably many more to come. That, and the data within it is either going to be updated live by complete strangers, or by one or two of us centrally. Either way, an Access backend made sense for this (with room to go SQLin' if we have to down the road.)

**ForrestCroce** · 10-19-2007, 01:56 AM

How did you solve it? Embed the html formatting into the query itself?

I've found cdata tags useful for stuff like what it sounds like you might be doing.

**ADAM Web Design** · 10-19-2007, 12:02 PM

I ended up using custom tags and adding in the HTML in question via Javascript, something similar to what John suggested.

**Learning Newbie** · 10-19-2007, 01:34 PM

It feels strange and kinda weird at first, but I swear it grows on ya.