How to display some xml nodes in a html page using xslt?

Question

I'm using xslt to apply some templates on a xml file and output a html page. So I defined the method of 'xsl:output' as 'html'. However, I need to display some xml nodes from the xml file in their original format and unfortunately they didn't appear on the html page as I expected.

This is the sample xml file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<employees>
    <employee>
        <name>Hello World</name>
        <title>UI Designer</title>
    </employee>
</employees>

My xslt is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html"/>

    <xsl:template match="/">
    <html>
    <head>
        <title>Example of Employee Data</title>
    </head>  
    <body>
        <h2>The following shows the structure of employee data file: </h2>
        <div style="background-color: grey">
            <xsl:copy-of select="employees/employee"/>
        </div>
        ......
    </body> 
    </html> 
    </xsl:template>
</xsl:stylesheet>

When I viewed the page source, the node 'employee' and its children were there, they were just not displayed in the html page. I think it's because I specified the output method as 'html'. But I have to generate a html page and embed some xml-format nodes into my page...

I've been trying but failing...Could anyone give me some help? Thanks!!

I expect the output page to be: enter image description here

What is an HTML engine supposed to do with <employee>, <name> and <title> tags? You must convert them to HTML. — Jim Garrison
– Jim Garrison, Commented Apr 1, 2013 at 22:21
@JimGarrison, I have lots of other tags in my xml to be transformed by the xslt into html to be human-readable. But some information must be kept in original xml format as an illustration or documentation based on the requirement...So in the above post, I used <employee> and its children as an example, to show that these nodes should appear in the html page just as they do in the xml file. In other words, keep all the tags, text, indentation... — D.Q.
– D.Q., Commented Apr 1, 2013 at 22:26
It would be much clearer if you just showed us expected output rather than described it to us. — Francis Avila
– Francis Avila, Commented Apr 1, 2013 at 22:35
For a nice way to display XML with syntax coloring and hi-lighting, see the source of the XPath Visualizer -- can be found here: huttar.net/dimitre/XPV/TopXML-XPV.html — Dimitre Novatchev
– Dimitre Novatchev, Commented Apr 2, 2013 at 2:26

Theo Gonella · Accepted Answer · 2014-04-28 14:59:58Z

4

It's probably a bit late for that, but I ended up in this page looking for exactly the same thing.

A very simple way of copying XML data on your HTML page via XLST would be to use the frame. I've found this solution here, and apparently it is obsolete and deprecated, but I've just tested and it's working.

<xmp>
    <xsl:copy-of select="."/>
</xmp>

As you can see from the screenshot, I've got a nice accordion with XML data below! enter image description here

answered Apr 28, 2014 at 14:59

Theo Gonella

636 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Kay · Accepted Answer · 2013-04-02 06:18:20Z

3

If the browser is going to display <employee> (angle brackets and all) then the serialized output of the transformation needs to be <employee>. XSLT 3.0 has a function that allows you to do

<xsl:value-of select="serialize(emp)"/>

which will give you want you want; some other processors may provide this as an extension function. If not, you could use a serializer written in XSLT itself, such as this one: http://fgeorges.org/xslt/serial/ or one of those listed here: http://www.mhonarc.org/archive/html/xsl-list/2010-08/msg00186.html

answered Apr 2, 2013 at 6:18

Michael Kay

165k11 gold badges97 silver badges173 bronze badges

1 Comment

D.Q. Over a year ago

Thank you for referring me to the links. I tried the one written by xslt 1.0 (mhonarc.org/archive/html/xsl-list/2010-08/msg00184.html) but unfortunately, it didn't work in my case...it just showed the node name of the first node and escaped all attributes and its children...

Mads Hansen · Accepted Answer · 2013-04-02 00:21:05Z

2

You might consider using a <textarea> element and apply the same style attributes to set the background color and leverage some JavaScript such as jQuery Autosize to have the textarea auto-adjust to fit the content:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html"/>

    <xsl:template match="/">
        <html>
            <head>
                <title>Example of Employee Data</title>
                <script src='http://www.jacklmoore.com/js/jquery.js'></script>
                <script src='http://www.jacklmoore.com/js/jquery.autosize.js'></script>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $('textarea').autosize();   
                    });
                </script>
            </head>  
            <body>
                <h2>The following shows the structure of employee data file: </h2>
                <textarea style="background-color: grey; width:100%">
                    <xsl:text>&#xa;</xsl:text>
                    <xsl:copy-of select="employees/employee"/>
                </textarea>
                ......
            </body> 
        </html> 
    </xsl:template>
</xsl:stylesheet>

answered Apr 2, 2013 at 0:21

Mads Hansen

67.6k12 gold badges119 silver badges154 bronze badges

1 Comment

Flynn1179 Over a year ago

I'd also consider adding the attribute readonly="true" to the <textarea> element

Collectives™ on Stack Overflow

How to display some xml nodes in a html page using xslt?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related