XML/XSL Transformed Table in a HTML Page

Question

I would like to add a table to a html page the data of which come from a server in xml over AJAX. I wanted to do it with XML transformation. On the server side the transformation works and displays the table as wished but on the client side I always encounter the whole XML document not the transformed table. Actually, the below XMLHttpRequest.responseXML contains the full XML document. I would appreciate any response.

Excerpt form the javascript code (the callback function that receives the ajax response):

    [...]
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        output = xmlhttp.responseXML;
        document.getElementById("result").innerHTML = output;
    }
    [...]

On the server side just for the test's sake, I set up a JSP page with the following content (if I start up the JSP page that displays the table as wished):

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<?xml-stylesheet type="text/xsl" href="generateXMLXSL.xsl" ?>

<bookstore>
    <book publisher="Kiskapu" year="2004">
        <author>John Doe</author>
        <title>C++ Programozas</title>
        <review>Nem tul jo.</review>
    </book>
    <book publisher="Manning" year="2009">
        <author>D. Malavia</author>
        <title>SCWD Exam Study Kit</title>
        <review>Excellent reading for the exam.</review>
    </book>
    <book publisher="Manning" year="2013">
        <author>Andrew Doe</author>
        <title>Web Application Development</title>
        <review>Medium</review>        
    </book>
    <book publisher="Sage" year="2008">
        <author>Salkind</author>
        <title>Exploring Research</title>
        <review>Excellent, easy-to-read and interesting!</review>        
    </book>
</bookstore>

The simple xsl file that works on the server side:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html"/>

    <xsl:template match="/">
            <table cellspacing="1">
                <tr style="background-color: #cccccc">
                    <th>Author</th>
                    <th>Title</th>
                    <th>Review</th>
                </tr>
                <xsl:for-each select="bookstore/book">
                    <tr style="background-color: #dedede">
                        <td><xsl:value-of select="author"/></td>
                        <td><xsl:value-of select="title"/></td>
                        <td><xsl:value-of select="review"/></td>
                    </tr>
                </xsl:for-each>
            </table>
    </xsl:template>

</xsl:stylesheet>

Solution: Martin drew my attention to the fact that on the client side if the xml comes via the XMLHttpRequest object, then the xsl file is not processed. This answers the error I encountered. The solution how to transform the xml from javascript based on variables can be found here:

Well if you load an XML document with XMLHttpRequest the browser does not apply an XSLT stylesheet. If you want to apply an XSLT transformation either load the XML into an iframe or object or use script to apply the XSLT yourself in your code. — Martin Honnen, Jul 19 '14 at 11:19
Thanks a lot, Martin. That would solve the issue. Could you also post a small sample how you would do it? — Tamas, Jul 19 '14 at 11:51
See https://developer.mozilla.org/en-US/docs/The_XSLT_JavaScript_Interface_in_Gecko for Mozilla, Chrome, Opera, Safari. — Martin Honnen, Jul 19 '14 at 12:00
Based on your first comment, I have found also 2 similar queries that would solve the problem. I will add them to the original question. Thanks for your response again. — Tamas, Jul 19 '14 at 12:04

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

Solution: Martin drew my attention to the fact that on the client side if the xml comes via the XMLHttpRequest object, then the xsl file is not processed. This answers the error I encountered. The solution how to transform the xml from javascript based on variables can be found here:

edited May 23 '17 at 10:33

Community

1
1

answered Jul 19 '14 at 12:13

Tamas

736
2
11
27

1

IMO, doing XSLT on the client is not ideal. It can be done, but it's more stable, predictable and compatible to transform your data on the server. – Tomalak Jul 19 '14 at 13:51
Thanks, for your comment. If you have a reach html page with javascript, how would you do that? I am interested in your opinion. I was also thinking about adding all the html content to the xsl file and then generate the html page based on the xml on the server and send it back as response to the client. However, I wanted to try it on the client side this way, as this takes off some load from the server. It did not seem too complex at first but it also needs an external js library, so it is not really simple. So I am interested in your opinion. – Tamas Jul 19 '14 at 14:41
Small addition: I mean external js library apart from JQuery that does not natively support xml transformation. If the XML-transformation is not the best option, then parsing the response xml in the html page with JQuery or plan javascript remains as a solution. – Tamas Jul 19 '14 at 19:55

XML/XSL Transformed Table in a HTML Page

1 Answers1