Adding stylesheet to xml with javascript not displaying correctly or at all
Question
After a year of using stackoverflow I decided to join, but of course due to the fact that after a day of struggling I am stuck.
My Problem: I am using javascript to build a document made of xml document, and stylesheet. This works well, (In Firefox, not at all in IE) for two of my cases but not the third.
javascript========================================
function GetBookInfo(object)
{
try
{
var xmlCont=loadXMLDoc("files/books/"+object.id+"/META-INF/container.xml");
opfFile=xmlCont.getElementsByTagName("container")[0].getElementsByTagName("rootfiles")[0].getElementsByTagName("rootfile")[0].getAttribute("full-path");
xmlCont=loadXMLDoc("files/books/"+object.id+"/"+opfFile);
xsl=loadXMLDoc("files/content.xsl");
displayXML(xmlCont, xsl, object.id);
}
catch (EventException)
{
alert(EventException.toString());
}
}
function displayXML(xmlIn, xslIn, place)
{
// code for IE
if (window.ActiveXObject)
{
ex=xmlIn.transformNode(xslIn);
document.getElementById(place).innerHTML=ex;
}
// code for Mozilla, Firefox, Opera, etc.
else
if (document.implementation && document.implementation.createDocument)
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xslIn);
resultDocument = xsltProcessor.transformToFragment(xmlIn,document);
document.getElementById(place).appendChild(resultDocument);
}
}
function loadXMLDoc(dname)
{
if (window.ActiveXObject)
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
}
try
{
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
catch (EventException)
{
alert("Could not open: " +dname);
}
}
javascript======================================== xsl==============================================
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/package">
<html>
<head>
</head>
<body>
<div id="METADATA">
<p>Hello</p>
<div id="title">
<xsl:value-of select='metadata/dc:title'/>
</div>
<br />
<div id="creator">
<xsl:value-of select='metadata/dc:creator'/>
</div>
<br />
<div id="publisher">
<xsl:value-of select='metadata/dc:publisher'/>
</div>
<br />
<div id="language">
<xsl:value-of select='metadata/dc:language'/>
</div>
<br />
<div id="rights">
<xsl:value-of select='metadata/dc:rights'/>
</div>
<br />
<div id="subject">
<xsl:value-of select='metadata/dc:subject'/>
</div>
<br />
<div id="publicationDate">
<xsl:value-of select='metadata/dc:date[@opf:event="publication"]'/>
</div>
<br />
<div id="conversionDate">
<xsl:value-of select='metadata/dc:date[@opf:event="conversion"]'/>
</div>
<br />
<div id="source">
<xsl:value-of select='metadata/dc:source'/>
</div>
<br />
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
xsl==============================================
The xml file is a typical opf file found in an epub folder. opf(standard xml)==================================================
<?xml version='1.0' encoding='UTF-8'?>
<package xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.idpf.org/2007/opf" version="2.0" unique-identifier="id">
<metadata>
<dc:rights>Public domain in the USA.</dc:rights>
<dc:identifier id="id" opf:scheme="URI">http://www.gutenberg.org/ebooks/1065</dc:identifier>
<dc:creator opf:file-as="Poe, Edgar Allan">Edgar Allan Poe</dc:creator>
<dc:title>The Raven</dc:title>
<dc:language xsi:type="dcterms:RFC4646">en</dc:language>
<dc:subject>Poetry, English</dc:subject>
<dc:date opf:event="publication">1997-10-01</dc:date>
<dc:date opf:event="conversion">2010-06-08T08:59:43.376234+00:00</dc:date>
<dc:source>http://www.gutenberg.org/files/1065/1065-h/1065-h.htm</dc:source>
<meta content="item5" name="cover"/>
</metadata>
<manifest>
<item href="pgepub.css" id="item1" media-type="text/css"/>
<item href="0.css" id="item2" media-type="text/css"/>
<item href="1.css" id="item3" media-type="text/css"/>
<!--Chunk: size=31062-->
<item href="www.gutenberg.org@files@1065@1065-h@1065-h-0.htm" id="item4" media-type="application/xhtml+xml"/>
<item href="cover.jpg" id="item5" media-type="image/jpeg"/>
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
</manifest>
<spine toc="ncx">
<itemref idref="item4" linear="yes"/>
</spine>
</package>
opf(standard xml)==================================================
Any help would be greatly appreciated. PS: If anyone knows why IE doens't display any of xsl created documents with error: "The stylesheet does not contain a document element. The stylesheet may be empty, or it may not be a well-formed XML document." it would also help, thanks.
2 answers
solution1
2 2013-03-29 19:24:47
Your stylesheet is failing because it is invalid. It uses the dc: and opf: namespaces in several places, but does not declare them. To fix this, change the opening xsl:stylesheet tag to contain the necessary namespace declarations. Since the source XML uses a default namespace, you will need to use namespaces for those nodes as well. I've also modified your XSLT to show how it can be made more succinct:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:opf="http://www.idpf.org/2007/opf">
<xsl:template match="opf:package">
<html>
<head>
</head>
<body>
<xsl:apply-templates select="opf:metadata" />
</body>
</html>
</xsl:template>
<xsl:template match="opf:metadata">
<div id="METADATA">
<p>Hello</p>
<xsl:apply-templates select='dc:title'/>
<xsl:apply-templates select='dc:creator'/>
<xsl:apply-templates select='dc:publisher'/>
<xsl:apply-templates select='dc:language'/>
<xsl:apply-templates select='dc:rights'/>
<xsl:apply-templates select='dc:subject'/>
<xsl:apply-templates select='dc:date[@opf:event="publication"]'>
<xsl:with-param name='id' select='"publicationDate"' />
</xsl:apply-templates>
<xsl:apply-templates select='dc:date[@opf:event="conversion"]'>
<xsl:with-param name='id' select='"conversionDate"' />
</xsl:apply-templates>
<xsl:apply-templates select='dc:source'/>
</div>
</xsl:template>
<xsl:template match='opf:metadata/*'>
<xsl:param name='id' select='local-name()' />
<div id='{$id}'>
<xsl:value-of select='.'/>
</div>
<br />
</xsl:template>
</xsl:stylesheet>
solution2
0 2013-03-30 10:14:51
You need to take the namespaces including the default namespace into account when writing path expressions in your XSLT code.
So your code should be
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:opf="http://www.idpf.org/2007/opf"
xmlns:dc="http://purl.org/dc/elements/1.1/"
exclude-result-prefixes="opf dc">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/opf:package">
<div id="METADATA">
<p>Hello</p>
<div id="title">
<xsl:value-of select='opf:metadata/dc:title'/>
</div>
<br />
<div id="creator">
<xsl:value-of select='opf:metadata/dc:creator'/>
</div>
<br />
<div id="publisher">
<xsl:value-of select='opf:metadata/dc:publisher'/>
</div>
<br />
<div id="language">
<xsl:value-of select='opf:metadata/dc:language'/>
</div>
<br />
<div id="rights">
<xsl:value-of select='opf:metadata/dc:rights'/>
</div>
<br />
<div id="subject">
<xsl:value-of select='opf:metadata/dc:subject'/>
</div>
<br />
<div id="publicationDate">
<xsl:value-of select='opf:metadata/dc:date[@opf:event="publication"]'/>
</div>
<br />
<div id="conversionDate">
<xsl:value-of select='opf:metadata/dc:date[@opf:event="conversion"]'/>
</div>
<br />
<div id="source">
<xsl:value-of select='opf:metadata/dc:source'/>
</div>
<br />
</div>
</xsl:template>
</xsl:stylesheet>
I have removed the html and body elements as your Javascript code indicates you want to create a fragment of HTML to be included in an existing HTML document that already has those structural elements.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.