current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 2 down vote favorite
2

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!

share|improve this question

1 Answer 1

up vote 1 down vote

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.