You can find an example of client-side transformation using Javascript and XSLT at
<http://msell.customer.netspace.net.au/>. The Javascript you need to do this can be
found at <http://msell.customer.netspace.net.au/javascript.js>. I've also supplied
the 'transformXML' function at the bottom of my post for easy perusal.
Basically, the function attempts to process the XSL and XML together using the
IE Javascript method. If that method fails, it tries to do the very same thing
only in a manner compatible with Gecko (Mozilla, Firefox, etc) browsers. I
can't take credit for the idea of dynamically transforming XSL and XML in this
fashion. The function is my own creation that has been developed from half a
dozen or more examples on the internet. This is really just an amalgamation of
what the community has already made.
...
What I can take credit for is this... Whenever a hyperlink is used, make that
hyperlink call a javascript function that changes one or more cookie values and
then reloads the page. The Javascript will pass the cookie values into the XSL
document using the 'addParameter' or 'setParameter' functions (depending on
which method of transforming done), and allows the XSL to change the results
based on the user's input.
The trick is to use the Javascript function 'reload' with a 'false' parameter. This
means that the 'reload' function won't download fresh copies of the XML and XSLT
documents from the server, merely use the documents it already has on the computer's
cache. The exact syntax I used is <window.location.reload(false);>. The benefit
of doing this... You don't have to download the XML or XSLT everytime you click a
link.
function transformXML(xmlDocURL, xslDocURL, divID)
{
// declare the local variables
var xmlDoc, xslDoc, docProcessor, docCache, DocRequest, docFragment;
// try the following
try
{
// instantiate and load the xml document
xmlDoc = new ActiveXObject("MSXML2.DOMDocument");
xmlDoc.async = false;
xmlDoc.load(xmlDocURL);
// instantiate and load the xsl document
xslDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
xslDoc.async = false;
xslDoc.load(xslDocURL);
// prepare the xsl document for transformation
docCache = new ActiveXObject("MSXML2.XSLTemplate");
docCache.stylesheet = xslDoc;
// instantiate the document processor and submit the xml document
docProcessor = docCache.createProcessor();
docProcessor.input = xmlDoc;
// add parameters to the xsl document
docProcessor.addParameter("book", getCookie("book"), "");
docProcessor.addParameter("category", getCookie("category"), "");
docProcessor.addParameter("keyword", getCookie("keyword"), "");
docProcessor.addParameter("sort", getCookie("sort"), "");
docProcessor.addParameter("status", getCookie("status"), "");
docProcessor.addParameter("topic", getCookie("topic"), "");
docProcessor.addParameter("view", getCookie("view"), "");
// process the documents into html and submit to the passed div box
docProcessor.transform();
// divID.innerHTML = docProcessor.output;
document.getElementById(divID).innerHTML = docProcessor.output;
}
// catch any errors from the above code
catch(e)
{
// try the following
try
{
// instantiate and load the xml document
docRequest = new XMLHttpRequest();
docRequest.open("GET", xmlDocURL, false);
docRequest.send(null);
xmlDoc = docRequest.responseXML;
// instantiate and load the xsl document
docRequest = new XMLHttpRequest();
docRequest.open("GET", xslDocURL, false);
docRequest.send(null);
xslDoc = docRequest.responseXML;
// instantiate the document processor and submit the xsl document
docProcessor = new XSLTProcessor();
docProcessor.importStylesheet(xslDoc);
// add parameters to the xsl document
docProcessor.setParameter(null, "book", getCookie("book"));
docProcessor.setParameter(null, "category", getCookie("category"));
docProcessor.setParameter(null, "keyword", getCookie("keyword"));
docProcessor.setParameter(null, "sort", getCookie("sort"));
docProcessor.setParameter(null, "status", getCookie("status"));
docProcessor.setParameter(null, "topic", getCookie("topic"));
docProcessor.setParameter(null, "view", getCookie("view"));
// clear the passed div if anything was in it
document.getElementById(divID).innerHTML = "";
// process the documents into html and submit to the passed div
docFragment = docProcessor.transformToFragment(xmlDoc, document);
document.getElementById(divID).appendChild(docFragment);
}
// catch any errors from the above code
catch(e)
{
// do nothing
}
}
}
----- Original Message ----
From: Michael Kay <mike(_at_)saxonica(_dot_)com>
To: xsl-list(_at_)lists(_dot_)mulberrytech(_dot_)com
Sent: Monday, December 11, 2006 3:47:42 PM
Subject: RE: [xsl] Dynamic Menu Using XSL
So are you saying you want to invoke a client-side transformation that
changes the page in response to user input? That's doable, but we need to
understand your processing model. The main issue with client-side
transformation is making it work cross-browser - again, that's doable, but
one needs to understand the requirements so that you can use the right API.
Michael Kay
--~------------------------------------------------------------------
XSL-List info and archive: http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--