RE: [xsl] Dynamic Menu Using XSL (Example)

[Michael Sell <msell@xxxxxxxxxxxxxxx>]

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@xxxxxxxxxxxx>
To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
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