CODEWITHSUNDEEP
javascriptxmlxslt
Zeinab Abbasimazar
Zeinab Abbasimazar

Reputation: 10469

Import JS files and Javascript in XSLT

I have this xsl file:

<?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"/>
    <xsl:template match="/scenario">
        <html>
            <head>
                <script type="text/javascript" src="html5.js"> </script>
                <script type="text/javascript" src="jquery.min.js"> </script>
                <script type="text/javascript" src="jquery.details.js"> </script>
                <script type="text/javascript">
                    <xsl:text>
                    window.console || (window.console = { 'log': alert });
                    $(function() {
                        $('html').addClass($.fn.details.support ? 'details' : 'no-details');
                        $('body').prepend($.fn.details.support ? 'Native support detected; the plugin will only add ARIA annotations and fire custom open/close events.' : 'Emulation active; you are watching the plugin in action!');
                        $('details').details();
                        $('details').on({
                            'open.details': function() {
                                console.log('opened');
                            },
                            'close.details': function() {
                                console.log('closed');
                            }
                        });
                    });
                    </xsl:text>
                </script>
                <style type="text/css">
                    body {
                    font-size: 90%
                    }
                    .mainScenario {
                    padding : 10px;
                    border: 2px solid #002588;
                    }
                    .mainScnName {
                    font-weight: bold;
                    font-size: larger;
                    color : #6632ff;
                    }
                    .mainScnDesc {
                    font-weight: bold;
                    font-size: larger;
                    color : #3312aa;
                    }
                    .subScenario {
                    border: 2px solid #0032ff;
                    padding : 10px;
                    }
                    .subScnName {
                    font-weight: bold;
                    font-size: larger;
                    color : #6632ff;
                    }
                    .subScnDesc {
                    font-weight: bold;
                    font-size: larger;
                    color : #3312aa;
                    }
                    .command {
                    margin-left : 20px;
                    }
                </style>
            </head>
            <body>
                <div class="mainScenario">
                    <pre>
                        <b><xsl:value-of select="./greeting"/></b>
                        <details>
                            <summary class="mainScnName">Name: <xsl:value-of select="@name"/></summary>
                            <p class="mainScnDesc">Description: <xsl:value-of select="@description"/></p>
                            <xsl:for-each select="./*">
                                <xsl:apply-templates select="."/>
                            </xsl:for-each>
                        </details>
                    </pre>
                </div>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="scenario">
        <div class="subScenario">
            <b><xsl:value-of select="./greeting"/></b>
            <pre>
                <details>
                    <summary class="subScnName">Name: <xsl:value-of select="@name"/></summary>
                    <p class="subScnDesc">Description: <xsl:value-of select="@description"/></p>
                    <xsl:for-each select="./*">
                        <xsl:apply-templates select="."/>
                    </xsl:for-each>
                </details>
            </pre>
        </div>
    </xsl:template>
</xsl:stylesheet>

The output for Javascript and JS file import part in firefox is this:

<script type="text/javascript" src="html5.js"><script type="text/javascript" src="jquery.min.js"/><script type="text/javascript" src="jquery.details.js"/><script type="text/javascript">
    window.console || (window.console = { 'log': alert });
    $(function() {
        $('html').addClass($.fn.details.support ? 'details' : 'no-details');
        $('body').prepend($.fn.details.support ? 'Native support detected; the plugin will only add ARIA annotations and fire custom open/close events.' : 'Emulation active; you are watching the plugin in action!');
        $('details').details();
        $('details').on({
            'open.details': function() {
                console.log('opened');
            },
            'close.details': function() {
                console.log('closed');
            }
        });
    });
</script>

I have no idea why the parser assumes all the tags are children of the first tag!!!

I should mention that the scripts are trying to enable details tag in firefox and IE. I copied them from this url. This sample works in my computer.

EDIT 1:

I have changed line <xsl:output method="html"/> into <xsl:output method="html" omit-xml-declaration="yes/>; but it did not affect the rendered HTML file. Secondly I've added <xsl:comment/> between empty script tags; this try rendered tags as I wanted:

<script type="text/javascript" src="html5.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.details.js"></script>
<script type="text/javascript">
    window.console || (window.console = { 'log': alert });
    $(function() {
        $('html').addClass($.fn.details.support ? 'details' : 'no-details');
        $('body').prepend($.fn.details.support ? 'Native support detected; the plugin will only add ARIA annotations and fire custom open/close events.' : 'Emulation active; you are watching the plugin in action!');
        $('details').details();
        $('details').on({
            'open.details': function() {
                console.log('opened');
            },
            'close.details': function() {
                console.log('closed');
            }
        });
    });
</script>

But There is a problem yet; the scripts does not work.

EDIT 2:

Well, I finally get that working; there was a problem in addressing js files. I also added some styles into the <head> tag as below:

<style>
    summary { cursor: pointer; }
    .no-details details > * { display: none; }
    .no-details details > summary:before { float: left; width: 20px; content: '► '; }
    .no-details details.open > summary:before { content: '▼ '; }
    .no-details details summary { display: block; }
</style>

And I have added <meta charset="utf-8"/> in the first line after <head>. The arrow signs are not showing in the page. Is there anything wrong with the character encoding or what?

EDIT 3:

I also tried <meta http-equiv="Content-Type" content="text/html; charset=utf-8">; nothing changed.

Upvotes: 0

Views: 1604

Answers (2)

jgroenen
jgroenen

Reputation: 1326

Maybe the workaround is simply this:

<script src="//whatever.com/script.js">&nbsp;</script>

Edit:

<script src="//whatever.com/script.js">&#160;</script>

Upvotes: 0

user663031
user663031

Reputation:

In HTML script tags are not self-closing. Try specifying the output method, which I see you did, but you will also need to omit the xml declaration:

<xsl:output method="html" omit-xml-declaration="yes"/>

That will also mean that img tags etc. are not self-closed, which ought to be OK.

A less optimal work-around would be to do

<script src="..."><xsl:comment/></script>

but that will litter your HTML with <!-- --> comments.

Upvotes: 1

Related Questions