1. Forum
  2. The Garage
  3. Uncaught SyntaxError: Unexpected token '<'
GreenLunar Author

Hello, I'm loading two files XML and XSL.
I'm attempting to put together an HTML page made by the combination of the two.
I guess I need to creat an element

and the append to it the result, but perhaps there's a neater solution.

GreenLunar Author

XML file

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>QupZilla</title>
    <artist>David Rosca</artist>
    <country>CZ</country>
    <company>QtWebKit</company>
    <price>10.90</price>
    <year>2010</year>
  </cd>
  <cd>
    <title>QupZilla C++</title>
    <artist>David Rosca</artist>
    <country>CZ</country>
    <company>QtWebKit</company>
    <price>10.90</price>
    <year>2012</year>
  </cd>
  <cd>
    <title>QupZilla Leaving PyQt4</title>
    <artist>David Rosca</artist>
    <country>CZ</country>
    <company>QtWebKit</company>
    <price>10.90</price>
    <year>2012</year>
  </cd>
  <cd>
    <title>QupZilla The Return Of The Python</title>
    <artist>David Rosca</artist>
    <country>CZ</country>
    <company>QtWebKit</company>
    <price>10.90</price>
    <year>2012</year>
  </cd>
  <cd>
    <title>Falkon</title>
    <artist>David Rosca</artist>
    <country>CZ</country>
    <company>KDE</company>
    <price>10.90</price>
    <year>2018</year>
  </cd>
  <cd>
    <title>Falkon The Great Path</title>
    <artist>David Rosca (feat. Juraj Oravec)</artist>
    <country>CZ</country>
    <company>QtWebKit</company>
    <price>10.90</price>
    <year>2012</year>
  </cd>
  <cd>
    <title>Falkon Rebirth of RSS</title>
    <artist>Juraj Oravec</artist>
    <country>DE</country>
    <company>KDE</company>
    <price>9.90</price>
    <year>2021</year>
  </cd>
  <cd>
    <title>Falkon Preview RSS</title>
    <artist>Genghis</artist>
    <country>EG</country>
    <company>Cairo</company>
    <price>9.90</price>
    <year>2022</year>
  </cd>
</catalog>

XSL file:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- xsl:output
method = 'html'
indent = 'yes'
omit-xml-decleration='no' /-->
<xsl:template match="/">
<html>
<head>
<title>transformed xml</title>
</head>
<body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Title</th>
      <th style="text-align:left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
GreenLunar Author

location.href is http://localhost:8000/cdcatalog.xml

Userscript file:

function loadXMLDoc(filename)
{
xhttp = new XMLHttpRequest();
xhttp.open("GET", filename, false);
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml = loadXMLDoc(location.href);
xsl = loadXMLDoc("http://localhost:8000/cdcatalog.xsl");
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
}

displayResult()
GreenLunar Author

The following code made the error disappear but the XML file is still not transformed...

const stylesheet = document.createElement('div');
document.getElementsByTagName('div')[0].appendChild(resultDocument);
GreenLunar Author

Solved

function loadXMLDoc(filename)
{
xhttp = new XMLHttpRequest();
xhttp.open("GET", filename, false);
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml = loadXMLDoc(location.href);
xsl = loadXMLDoc("http://localhost:8000/cdcatalog.xsl");
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToDocument(xml);
}

displayResult()

window.content  = resultDocument;

document.replaceChild (
    document.importNode (resultDocument.documentElement, true),
    document.documentElement
);