I have a xml file with this tags:
<style>
<sheet name="step">
<![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Tabela</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Tabela</h2>
<table>
<thead>
<tr>
<xsl:for-each select="formData[1]/*">
<th><xsl:value-of select="name()"/></th>
</xsl:for-each>
</tr>
</thead>
<tbody>
<xsl:for-each select="formData">
<tr>
<xsl:for-each select="*">
<td><xsl:value-of select="."/></td>
</xsl:for-each>
</tr>
</xsl:for-each>
</tbody>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
]]>
</sheet>
</style>
<script>
<function name="obj2xml">
<![CDATA[
function obj2xml(formData) {
let xml = '<formData>n';
for (let [key, value] of formData.entries()) {
xml += `t<${key}>${value}</${key}>n`;
}
xml += '</formData>n';
return xml;
}
]]>
</function>
<function name="xml2html">
<![CDATA[
function xml2html(xml_str, xslt_str) {
const parser = new DOMParser();
const xml = parser.parseFromString(xml_str, "application/xml");
const xslt = parser.parseFromString(xslt_str, "application/xml");
const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
const resultDocument = xsltProcessor.transformToFragment(xml, document);
const serializer = new XMLSerializer();
const result_str = serializer.serializeToString(resultDocument);
return result_str;
}
]]>
</function>
</script>
which I load to my page through this javascript code:
// Obtém e armazena os estilos
const sheets = xml_doc.querySelectorAll('style sheet');
for (var i = 0; i < sheets.length; i++) {
var sheet = sheets[i];
var name = sheet.getAttribute('name');
var content = sheet.textContent.trim();
this.styles.set(name, content);
}
// Obtém e armazena as funções
const functions = xml_doc.querySelectorAll('script function');
for (var j = 0; j < functions.length; j++) {
var func = functions[j];
var name = func.getAttribute('name');
var content = func.textContent.trim();
const script_content = `window['${name}'] = ${content}`;
eval(script_content);
this.scripts.set(name, window[name]);
}
and use it like that:
var steps = this.section.sections.getElementsByClassName("form");
for(var i=0; i<steps.length-1; i++) {
var formElement = document.createElement("form");
while(steps[i].firstChild) formElement.appendChild(steps[i].firstChild);
const obj2xml = this.scripts.get("obj2xml");
var xml = obj2xml(new FormData(formElement));
var xslt = this.styles.get('step');
const xml2html = this.scripts.get("xml2html");
var result = xml2html(xml, xslt);
document.getElementById("frame").contentDocument.write(result.body);
}
where the variable xslt receive the correct values, but xml and result, which supposed to receive the result of functions, are both receiving the value ‘undefined’.
what I got wrong here?