how to apply xsl styles to an embedded xml inside html with javascript

Question

I have a html file embedded xml tags inside, here i am trying to apply xslt styles are written in another separate file (somefile.xsl) importing with javascript, i am successful applying styles with external xslt file importing with javascript but it is working only in internet explorer , other browsers failed to apply styles.. bellow is my html code please look at my code. where i am doing wrong here ? Except IE no other browser seem working with these technique.

    <HTML>
    <HEAD>
    <TITLE>Sample XML with XSL</TITLE>
        <xml id="elx">
            <hello-world>  
            <greeter>An XSLT Programmer</greeter>   
            <greeting>Hello, World! </greeting>
           </hello-world>
       </xml>
   </HEAD>
   <BODY>
   <SCRIPT language = "javascript">
   if(window.ActiveXObject)
   {
    //IE
         alert("hi");
         var xslDoc = new ActiveXObject("Microsoft.XMLDOM");
         xslDoc.async = false;
         xslDoc.load("helloworld.xsl");
         document.write(elx.transformNode(xslDoc));
 }
 else if (document.implementation && document.implementation.createDocument)
{
  //For Other Browsers

          xsltProcessor=new XSLTProcessor();
          xsltProcessor.importStylesheet("helloworld.xsl");
          result = xsltProcessor.transformToDocument(elx);
          // here 'elx' is id of embedded xml in header.
          document.write(result);
 }

  </SCRIPT>
  </BODY>
  </HTML>

and here is my xsl ( helloworld.xsl ) file which i am trying to import with javascript and adding styles to embedded xml inside html file

<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
<xsl:output method="html" version="1.1" encoding="iso-8859-1" />
<xsl:template match="/hello-world">
    <HTML>
        <HEAD>
            <TITLE>
            </TITLE>
        </HEAD>
        <BODY>
            <H1>
                <xsl:value-of select="greeting"/>
            </H1>
            <xsl:apply-templates select="greeter"/>
        </BODY>
    </HTML>
</xsl:template>

within my html file i get only id of that xml file, by using that xml id i need to apply styles using javascript. hope you understand my issue and please solve this as soon as possible.

The problem may be because the xml data island was only ever a microsoft supported feature in HTML, and probably not recognised by other browsers. In fact, Microsoft are no longer going to support it in IE10 and above (See msdn.microsoft.com/en-us/library/ie/hh801224(v=vs.85).aspx). I think the solution will have to be to have your XML in a separate file rather than embedded in the HTML. — Tim C
– Tim C, Commented Nov 29, 2013 at 9:27

Anton Riab · Accepted Answer · 2015-05-07 15:03:44Z

importStylesheet needs object(not url to file), you can get it from domParser

var domParser = new DOMParser();
xsltProcessor.importStylesheet( domParser.parseFromString(some_text_value, "text/xml") );

Full lazy solution for Firefox/Chorme like following code

<HTML>
<HEAD>
<script id="elx" type="text/xml">
    <hello-world>  
        <greeter>An XSLT Programmer</greeter>   
        <greeting>Hello, World! </greeting>
   </hello-world>
</script>
<script id="stlsh" type="text/xml">
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" version="1.1" encoding="iso-8859-1" />
    <xsl:template match="/hello-world">
        <HTML>
            <BODY>
                <H1>
                    <xsl:value-of select="greeting"/>
                </H1>
                <xsl:apply-templates select="greeter"/>
            </BODY>
        </HTML>
    </xsl:template>
    </xsl:stylesheet>
</script>
</HEAD>
<BODY>
<SCRIPT language = "javascript">
    var domParser = new DOMParser();
    var xsltProcessor = new XSLTProcessor();

    xsltProcessor.importStylesheet( domParser.parseFromString(stlsh.innerHTML, "text/xml") );
    var result = xsltProcessor.transformToDocument( domParser.parseFromString(elx.innerHTML, "text/xml") );

    document.write(result.firstElementChild.innerHTML);
</SCRIPT>
</BODY>
</HTML>

If you will want use external files, you need to change stlsh.innerHTML/elx.innerHTML to XMLHttpRequest with responseText and put it to domParser.

Or get XMLHttpRequest responseXML.documentElement - may be, domParser doesn't need

Matt617 · Accepted Answer · 2013-11-29 03:24:24Z

0

well for sure the go to XSL tutorial is W3Schools:

http://www.w3schools.com/xsl/xsl_transformation.asp

but in your cause I think the if-statement around your "other browser" is the issue that is suspect.

<yourCode>
else if (document.implementation && document.implementation.createDocument)
</yourCode>

can you add an alert or a console log into that If statement to check? also why do you have a second if statement at all? if you have "IE code" and "non IE" code why not just put it in an else?

NOTE: have not tried your code, its thanksgiving night and im a bit tired but just a few thoughts

answered Nov 29, 2013 at 3:24

Matt617

4582 silver badges14 bronze badges

1 Comment

Ram Over a year ago

Yes in else block 'alert()' is working but styles are not applying to the xml id 'elx' with javascript command -> result = xsltProcessor.transformToDocument(elx); i dont know whats wrong in this line of code. i need a solution if anybody found in any otherway..

Collectives™ on Stack Overflow

how to apply xsl styles to an embedded xml inside html with javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related