Safari Not Processing Html From Xsl The Same
Solution 1:
OK - what you have is a namespacing problem. This is the output of transforming content.xml with content.xsl (formatted and abbreviated for readability) as a DOM document fragment.
<?xml version="1.0" encoding="UTF-8"?><divxmlns:msws="http://tempuri.org/"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><ulid="categorybody"><liid="categoryitem"><ahref="javascript:void(0)"onclick="
XsltTransform('article.xml','article.xslt');
">The first title</a></li><li>07 Oct 2011</li><li>A nice long description 1.</li><liid="categoryitem">
... etc ...
</ul></div>The thing to note about this is that this is an XML based DOM fragment - and the elements are in no namespace. So when you add this direct to your DOM (as is done in your question), Safari will not consider the elements to be HTML elements - because it expects those to be in the http://www.w3.org/1999/xhtml namespace.
When fragment is serialized, it will be converted into the XML above.
When that XML is parsed back using innerHTML, (as is done in your revised working code), the parser will treat the XML as HTML. In accordance with HTML5 parsing practice, the elements will automatically be put in to the http://www.w3.org/1999/xhtml namespace and will be treated as HTML, so things work as intended.
There's a couple of problems with your solution. The first is that serializing as XML and parsing back as HTML is risky. For example, script elements may get serialized as <script src="..." /> which is OK as XML, but not as HTML.
Second, it requires a serialize/parse cycle that will hurt performance.
Resolving this may be as simple as adding xmlns="http://www.w3.org/1999/xhtml" as an attribute to the xsl:stylsheet element of content.xsl, but I haven't tested this in Safari.
Solution 2:
Ok, I don't really understand why this works, so I would really appreciate a description of what is going on here and what was possibly wrong with the original code, but here is a new version of the main.xslt which actually does what it is supposed to.
main.xslt
<?xml version="1.0" encoding="iso-8859-1"?><xsl:stylesheetversion="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:msws="http://tempuri.org/"
><xsl:templatematch="/"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>main</title><linkhref="StyleSheet1.css"rel="stylesheet"type="text/css" /><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><scripttype="text/javascript">functiontransform(xmlfile,xslfile)
{
var xmlRequest = newXMLHttpRequest();
xmlRequest.open("GET", xmlfile, false);
xmlRequest.send(null);
xml= xmlRequest.responseXML;
var xslRequest = newXMLHttpRequest();
xslRequest.open("GET", xslfile, false);
xslRequest.send(null);
xsl = xslRequest.responseXML;
xsltProcessor = newXSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("contentbody").appendChild(resultDocument);
}
functiongo(xmlfile,xslfile)
{
var xmlRequest = newXMLHttpRequest();
xmlRequest.open("GET", xmlfile, false);
xmlRequest.send(null);
xml= xmlRequest.responseXML;
var xslRequest = newXMLHttpRequest();
xslRequest.open("GET", xslfile, false);
xslRequest.send(null);
xsl = xslRequest.responseXML;
xsltProcessor=newXSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("contentbody").innerHTML = "";
document.getElementById("contentbody").appendChild(resultDocument);
}
functionloadXMLDoc(dname)
{
xhttp=newXMLHttpRequest();
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
functiondisplayResult(xmlfile,xslfile)
{
xml=loadXMLDoc(xmlfile);
xsl=loadXMLDoc(xslfile);
xsltProcessor=newXSLTProcessor();
xsltProcessor.importStylesheet(xsl);
varXmlDom = xsltProcessor.transformToDocument(xml);
var serializer = newXMLSerializer();
var output = serializer.serializeToString(XmlDom.documentElement);
//alert(output);// resultDocument = xsltProcessor.transformToFragment(xml,document);document.getElementById("contentbody").innerHTML = "";
// document.getElementById("contentbody").appendChild(resultDocument);document.getElementById("contentbody").innerHTML = output;
// alert(document.getElementById("contentbody").innerHTML);
}
</script></head><body><divid="main"><divid="menu"><divid="categorytitle">
Categories
</div><ulid="categorybody"><xsl:for-eachselect="*/*/msws:FeedDTO"><xsl:iftest="msws:Name != 'Free to view'"><liid="menuitem"><xsl:elementname="a"><xsl:attributename="href">javascript:void(0)</xsl:attribute><xsl:attributename="onclick">
displayResult('category.xml','category.xslt');
</xsl:attribute><xsl:value-ofselect="substring(msws:Name, 1, 100)"/></xsl:element></li></xsl:if></xsl:for-each></ul></div><divid="content"><divid="contenttitle">
Content
</div><divid="contentbody"><!--
<div xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msws="http://tempuri.org/"><ul id="categorybody"><li id="categoryitem"><a href="javascript:void(0)" onclick="
XsltTransform('article.xml','article.xslt');
">The first title</a></li><li>07 Oct 2011</li><li>A nice long description 1.</li><li id="categoryitem"><a href="javascript:void(0)" onclick="
XsltTransform('article.xml','article.xslt');
">The second title</a></li><li>06 Oct 2011</li><li>A nice long description 2.</li><li id="categoryitem"><a href="javascript:void(0)" onclick="
XsltTransform('article.xml','article.xslt');
">The third title</a></li><li>06 Oct 2011</li><li>A nice long description 3.</li><li id="categoryitem"><a href="javascript:void(0)" onclick="
XsltTransform('article.xml','article.xslt');
">The fourth title</a></li><li>05 Oct 2011</li><li>A nice long description 4.</li><li id="categoryitem"><a href="javascript:void(0)" onclick="
XsltTransform('article.xml','article.xslt');
">The fifth title</a></li><li>04 Oct 2011</li><li>A nice long description 5.</li></ul></div>--></div></div></div></body></html></xsl:template></xsl:stylesheet>
Post a Comment for "Safari Not Processing Html From Xsl The Same"