Modify loaded XML (displayed in Browser(Chrome) via XSL) with JavaScript

Question

I have the following XML Document displayed inside a Chrome Browser Control (CefSharp.Wpf):

<?xml-stylesheet type="text/xsl" href="#"?>
<xsl:stylesheet version="1.0" xmlns:data="x" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <data:data>
  <log>
   <entry>
    <message>first</message>
   </entry>
   <entry>
    <message>second</message>
   </entry>
  </log>
 </data:data>
 <xsl:template match="xsl:stylesheet">
  <xsl:apply-templates select="data:data" />
 </xsl:template>
 <xsl:template match="log">
  <html>
   <body>
    <xsl:for-each select="entry">
     <xsl:value-of select="message" /><br />
    </xsl:for-each>
</body>
  </html>
 </xsl:template>
</xsl:stylesheet>

Now I want to add a new <entry> via JavaScript (live log window). Is it even possible to change the XML 'live'? Even when I deleted a node, the browser didn't updated his view.

I don't want to reload the whole document when adding a new entry (takes ~80ms). I don't want to write direct HTML inside the browser, because the xsl-template part is stored as a template and can change.

Any other ideas are welcome! :)

Thanks in advance!

vbence · Accepted Answer · 2013-12-16 14:48:01Z

In modern browsers you can re-run the transformation from Javascript. Just need access to the original XML files.

See the following example HTML:

<!DOCTYPE html>
<html>
<head>
<script>

function sjax(url) {
    var req = new XMLHttpRequest();
    req.open("GET",url,false);
    req.send(null);
    return req.responseXML;
}

function transformBody(data, template) {

    while ((e = document.body.firstChild) !== null) {
        document.body.removeChild(e);
    }

    var processor = new XSLTProcessor();
    processor.importStylesheet(template);
    var resultFragment = processor.transformToFragment(data, document);
    document.body.appendChild(resultFragment);
}

var data = sjax("data.xml");
var xslt = sjax("template.xslt");

window.addEventListener("load", function (e) {
    transformBody(data, xslt);
}, false);

window.addEventListener("click", function (e) {
    data.documentElement.querySelector("log")
        .appendChild(data.createElement("entry"))
        .appendChild(data.createElement("message"))
        .appendChild(data.createTextNode("new node"));
    transformBody(data, xslt);
}, false);
</script>
</head>
<body>
</body>
</html>

data.xml

<?xml version="1.0" encoding="UTF-8"?>
<data:data xmlns:data="x">
  <log>
   <entry>
    <message>first</message>
   </entry>
   <entry>
    <message>second</message>
   </entry>
  </log>
</data:data>

template.xslt

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:data="x" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="xsl:stylesheet">
  <xsl:apply-templates select="data:data" />
 </xsl:template>
 <xsl:template match="log">
  <html>
   <body>
    <xsl:for-each select="entry">
     <xsl:value-of select="message" /><br />
    </xsl:for-each>
</body>
  </html>
 </xsl:template>
</xsl:stylesheet>

Collectives™ on Stack Overflow

Modify loaded XML (displayed in Browser(Chrome) via XSL) with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related