CODEWITHSUNDEEP
htmlxmlxslt
D.Q.
D.Q.

Reputation: 547

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

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

Upvotes: 4

Views: 9535

Answers (3)

Theo Gonella
Theo Gonella

Reputation: 63

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

Upvotes: 4

Michael Kay
Michael Kay

Reputation: 163458

If the browser is going to display <employee> (angle brackets and all) then the serialized output of the transformation needs to be &lt;employee&gt;. 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

Upvotes: 3

Mads Hansen
Mads Hansen

Reputation: 66783

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>

Upvotes: 2

Related Questions