xslt/editor.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4     <title></title>
   5 </head>
   6 <body>
   7 <label title="XSL"> XSL <br/>
   8     <textarea id="ta1" rows="24" cols="50">
   9         <xsl:stylesheet id="stylesheet" version="1.0" xmlns="http://www.w3.org/1999/xhtml"
  10                         xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  11             <xsl:output method="html" indent="yes"/>
  12
  13             <xsl:param name="myOrder"/>
  14
  15             <xsl:template match="/">
  16
  17                 <xsl:apply-templates select="/div//div">
  18                     <xsl:sort select="." data-type="number" order="{$myOrder}"/>
  19                 </xsl:apply-templates>
  20             </xsl:template>
  21
  22             <xsl:template match="div">
  23                 <xsl:copy-of select="."/>
  24             </xsl:template>
  25         </xsl:stylesheet>
  26     </textarea>
  27 </label>
  28 <label title="XML"> XML<br/>
  29     <textarea id="ta2" rows="24" cols="50">
  30         <div id="example">
  31             <div>1</div>
  32             <div>2</div>
  33             <div>3</div>
  34             <div>4</div>
  35             <div>5</div>
  36             <div>6</div>
  37             <div>7</div>
  38             <div>8</div>
  39             <div>9</div>
  40             <div>10</div>
  41         </div>
  42     </textarea>
  43 </label>
  44 <button onclick="doWork()">Ok</button>
  45 <label title="Result XML"> Result XML<br/>
  46     <textarea id="ta3" rows="24" cols="50">
  47         </textarea>
  48     </label>
  49
  50 <script type="text/javascript">
  51
  52     function doWork()
  53     {
  54         var parser = new DOMParser();
  55
  56         var xslDoc = parser.parseFromString(document.getElementById('ta1').value, 'text/xml');
  57         var xmlDoc = parser.parseFromString(document.getElementById('ta2').value, 'text/xml');
  58
  59         console.log(xslDoc.documentElement);
  60         console.log(xmlDoc.documentElement);
  61
  62         var xsltProcessor = new XSLTProcessor();
  63         xsltProcessor.importStylesheet(xslDoc);
  64
  65         try{
  66         var result = xsltProcessor.transformToDocument(xmlDoc.documentElement, document);
  67             var serializer = new XMLSerializer();
  68             var prettyString = XML(serializer.serializeToString(result)).toXMLString();
  69
  70             document.getElementById('ta3').value =result.documentElement.outerHTML;//prettyString;
  71         console.log('result', result.documentElement);
  72         }
  73         catch(e)
  74         {
  75             console.log(e);
  76             throw e;
  77         }
  78
  79     }
  80 </script>
  81 </body>
  82 </html>