I have found some javascript which can be used in conjunction with an xml file and a couple of xslt stylesheets. The idea is to use one xml file, and use the javascript to switch between the xslt style sheets that get used. In the case of this example, the xml gets sorted in ascending or descending order depending on the stylesheet assigned.
I am working through the javascript trying to understand it. The comments are mine and so could be incorrect.
To start with, could someone explain to me what the variable dataXML is used for, and what the line
dataXML = document.implementation.createDocument("", "", null);
in the loadData() function does?
<html>
<head>
<title>testing</title>
<script language="JavaScript">
var processor; /* this will be used to load a new XSLT processor */
var dataXML; /* what is the purpose of this variable? */
var xslfile; /* variable to hold reference to xslt file*/
/* this is called in the body tag*/
function Start()
{
/* new XSLT processor is loaded
* a new source node tree is built based on the
* xml file, the nodes are traversed and templates
* in the xslt file are found according to which a new
* result node tree is built - and this is then translated
* into a new html document */
processor = new XSLTProcessor ();
loadData (); /* this function is defined below */
xslfile = 'notes.xslt'; /* default stylesheet assigned*/
}
/* this is called by the Start() function
* which is called in the body tag */
function loadData ()
{
/* what happens here? */
dataXML = document.implementation.createDocument("", "", null);
/*below sets the loading of the xml file to be
* synchronous - the function waits until the document
* has finished loading before it returns the document
* and the processing continues.
*Otherwise it would be neccesary to check if the document
* has finished loading*/
dataXML.async = false;
dataXML.load("notes.xml"); /* this specifies which xml file is loaded */
}
/* the WriteHTML function is called by the Generate Ascending
* and Generate Descending buttons */
function WriteHTML ( afile )
{
xslfile = afile; /* the current stylesheet is passed to the WriteHTML function*/
refresh(); /* function defined below*/
}
/* the refresh() function is called by the
*WriteHTML() function, which in turn is called
* by the Generate Ascending and Descending buttons*/
function refresh()
{
var dataXSL = document.implementation.createDocument("", "", null);
dataXSL.async = false;
dataXSL.load(xslfile);
processor.reset();
processor.importStylesheet(dataXSL);
var ownerDocument = document.implementation.createDocument("", "", null);
var result = processor.transformToDocument(dataXML, document);
document.getElementById ("here").removeChild (document.getElementById ("here").firstChild);
document.getElementById ("here").appendChild(result.firstChild);
}
/* writeBlank() is called by the Start button */
function WriteBlank()
{
document.getElementById ("here").removeChild (document.getElementById ("here").firstChild);
document.getElementById ("here").appendChild(document.createTextNode ("blank"));
}
function DelFirst ()
{
var section = dataXML.getElementsByTagName ("section");
if (section.length != 0)
{
var sectionone = section.item(0);
sectionone.parentNode.removeChild (sectionone);
refresh();
}
}
</SCRIPT>
<META content="MSHTML 6.00.2800.1528" name=GENERATOR></HEAD>
<BODY onload=Start()>
<FORM>
<BUTTON onclick="WriteBlank(); return false">Start</BUTTON>
<BUTTON onclick="WriteHTML('notesa.xslt'); return false">Generate Ascending</BUTTON>
<BUTTON onclick="WriteHTML('notesd.xslt'); return false">Generate Descending</BUTTON>
<BUTTON onclick="DelFirst(); return false">Delete First Node</BUTTON>
<BUTTON onclick="loadData(); refresh(); return false">Reload XML</BUTTON>
</FORM>
<DIV id=here>blank</DIV>
</BODY></HTML>
I am working through the javascript trying to understand it. The comments are mine and so could be incorrect.
To start with, could someone explain to me what the variable dataXML is used for, and what the line
dataXML = document.implementation.createDocument("", "", null);
in the loadData() function does?
<html>
<head>
<title>testing</title>
<script language="JavaScript">
var processor; /* this will be used to load a new XSLT processor */
var dataXML; /* what is the purpose of this variable? */
var xslfile; /* variable to hold reference to xslt file*/
/* this is called in the body tag*/
function Start()
{
/* new XSLT processor is loaded
* a new source node tree is built based on the
* xml file, the nodes are traversed and templates
* in the xslt file are found according to which a new
* result node tree is built - and this is then translated
* into a new html document */
processor = new XSLTProcessor ();
loadData (); /* this function is defined below */
xslfile = 'notes.xslt'; /* default stylesheet assigned*/
}
/* this is called by the Start() function
* which is called in the body tag */
function loadData ()
{
/* what happens here? */
dataXML = document.implementation.createDocument("", "", null);
/*below sets the loading of the xml file to be
* synchronous - the function waits until the document
* has finished loading before it returns the document
* and the processing continues.
*Otherwise it would be neccesary to check if the document
* has finished loading*/
dataXML.async = false;
dataXML.load("notes.xml"); /* this specifies which xml file is loaded */
}
/* the WriteHTML function is called by the Generate Ascending
* and Generate Descending buttons */
function WriteHTML ( afile )
{
xslfile = afile; /* the current stylesheet is passed to the WriteHTML function*/
refresh(); /* function defined below*/
}
/* the refresh() function is called by the
*WriteHTML() function, which in turn is called
* by the Generate Ascending and Descending buttons*/
function refresh()
{
var dataXSL = document.implementation.createDocument("", "", null);
dataXSL.async = false;
dataXSL.load(xslfile);
processor.reset();
processor.importStylesheet(dataXSL);
var ownerDocument = document.implementation.createDocument("", "", null);
var result = processor.transformToDocument(dataXML, document);
document.getElementById ("here").removeChild (document.getElementById ("here").firstChild);
document.getElementById ("here").appendChild(result.firstChild);
}
/* writeBlank() is called by the Start button */
function WriteBlank()
{
document.getElementById ("here").removeChild (document.getElementById ("here").firstChild);
document.getElementById ("here").appendChild(document.createTextNode ("blank"));
}
function DelFirst ()
{
var section = dataXML.getElementsByTagName ("section");
if (section.length != 0)
{
var sectionone = section.item(0);
sectionone.parentNode.removeChild (sectionone);
refresh();
}
}
</SCRIPT>
<META content="MSHTML 6.00.2800.1528" name=GENERATOR></HEAD>
<BODY onload=Start()>
<FORM>
<BUTTON onclick="WriteBlank(); return false">Start</BUTTON>
<BUTTON onclick="WriteHTML('notesa.xslt'); return false">Generate Ascending</BUTTON>
<BUTTON onclick="WriteHTML('notesd.xslt'); return false">Generate Descending</BUTTON>
<BUTTON onclick="DelFirst(); return false">Delete First Node</BUTTON>
<BUTTON onclick="loadData(); refresh(); return false">Reload XML</BUTTON>
</FORM>
<DIV id=here>blank</DIV>
</BODY></HTML>