asked on

How do i pass a parameter from html to xslt

Hello,

I have defined two files 1> XML 2> XSL. I have also defined HTML with a push button. I need to pass a parameter from html to xsl/xml file on the click of a button.

This parameter will be used in the xsl file to select/filter some data. Can you please let me know how this can be done

Gertone (Geert Bormans)

Maybe now your XSL is referenced using an XML-stylesheet Processor Instruction
You can't pass parameters that way

If you need to do things server side, it is a matter of picking the parameter from the http request and pass it on to the XSLT process

You can mimick that behaviour client side, by using javascript to launch the XSLT

I might need more details on how you do the processes now,
but basically
- create an object in javascript from both the XML and XSLT (if you want this cross browser, I recommend that you use Sarissa library)
- call the XSLT on the XML in a Javascript function.
- use that XSLT to create the button, to pass the correct parameter to the function (basically refreshing the XML rendering)

All that is feasible, but I like to see: your XML, your XSL, your HTML and your exact requirements

vishey68

ASKER

I am doing a very simple one right which i definitely will use in my project once i get the idea

i have attached the code snippet
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:template match="/">
  <html>
  <body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th align="left">Title</th>
      <th 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>
 
<html>
<head>
<script>
function loadXMLDoc(fname)
{
  var xmlDoc;
  // code for IE
  if (window.ActiveXObject)
  {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
  // code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation
  && document.implementation.createDocument)
  {
    xmlDoc=document.implementation.createDocument("","",null);
   }
  else
  {
    alert('Your browser cannot handle this script');
  }
xmlDoc.async=false;
xmlDoc.load(fname);
return(xmlDoc);
}
 
function displayResult()
{
xml=loadXMLDoc("cdcatalog.xml");
xsl=loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject)
  {
    ex=xml.transformNode(xsl);
    document.getElementById("example").innerHTML=ex;
  }
  // code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation
  && document.implementation.createDocument)
  {
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    resultDocument = xsltProcessor.transformToFragment(xml,document);
    document.getElementById("example").appendChild(resultDocument);
  }
}
</script>
</head>
<body id="example" >
tr td input type = button onlick = displayresult
</body>
</html> 
 
 
i wil have 5 radio buttons in my html and each selection will have toselect one country artist. This concept will be used in a live project where we do not want to hit the server as there will be many xslt calls and xsl transform and i am a beg. Thanks a lot in adv

Open in new window

vishey68

ASKER

In my live project i will be having multiple selection inputs and each one will have to apply one xsl. i want o avoid goint to server if possible.

i need this because the response will be coming in form of a string ie response .xml and each selection will have to select a diff o/p

Gertone (Geert Bormans)

OK, do you need this to work in multiple browsers?
Thenb you start with downloading sarissa from sourceforge
I will post an example later today

Gertone (Geert Bormans)

I have this as file cdcatalog1.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    
    <xsl:template match="/">
        <div>
                <h2>My CD Collection</h2>
                <table border="1">
                    <tr bgcolor="#afafaf">
                        <th align="left">Title</th>
                        <th 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>
                <hr/>
            <input type="button" onclick="displayresult(1)" value="Transform 1"/><br/>
            <input type="button" onclick="displayresult(2)" value="Transform 2"/><br/>
        </div>
    </xsl:template>
    
</xsl:stylesheet>

Open in new window

Gertone (Geert Bormans)

And this as cdcatalog2.xsl
(only the colour is different)

Note that I have the buttons inside the XSL

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    
    <xsl:template match="/">
        <div>
                <h2>My CD Collection</h2>
                <table border="1">
                    <tr bgcolor="#9acd32">
                        <th align="left">Title</th>
                        <th 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>
            <hr/>
            <input type="button" onclick="displayresult(1)" value="Transform 1"/><br/>
            <input type="button" onclick="displayresult(2)" value="Transform 2"/><br/>
        </div>
    </xsl:template>
 </xsl:stylesheet>

Open in new window

Gertone (Geert Bormans)

Here is an example XML
It uses Sarissa, make sure that you copy the two javascript files from Sarissa in your script subdirectory when testing
Sarissa takes care of all the cross browser issues for XML for you, it is much more robust than the code you are using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<script type="text/javascript" src="script/sarissa.js"></script>
		<script type="text/javascript" src="script/sarissa_ieemu_xpath.js"></script>
		<script type="text/javascript" language="JavaScript">
		  <!--
		  // create the xml document object
		  var oXML = Sarissa.getDomDocument();
		  oXML.async = false;
		  oXML.load("cdcatalog.xml");
		  //alert(new XMLSerializer().serializeToString(oXML));
		  
		  // create an object from the xsl
		  var oXSL1 = Sarissa.getDomDocument();
		  oXSL1.async = false; 
		  oXSL1.load("cdcatalog1.xsl");
		  //alert(new XMLSerializer().serializeToString(oXSL1));
 
		  // create an object from the xsl
		  var oXSL2 = Sarissa.getDomDocument();
		  oXSL2.async = false; 
		  oXSL2.load("cdcatalog2.xsl");
		  //alert(new XMLSerializer().serializeToString(oXSL2));
		  
		  function displayresult(nr)
		    {
		      var xsltProc  = new XSLTProcessor();
		      if (nr == 1) 
		        {
		        	xsltProc.importStylesheet(oXSL1);
		      	};
		      else if (nr == 2)  
		        {
		        	xsltProc.importStylesheet(oXSL2);
		      	};
		      //xsltProc.setParameter('', "detail-id", id);
		      var transformResult = xsltProc.transformToDocument(oXML);
		      // alert(new XMLSerializer().serializeToString(transformResult));
		      document.getElementById("example").innerHTML = new XMLSerializer().serializeToString(transformResult);
		    }
	
		  // -->
	    </script>
	</head>
	<body onload="displayresult('1');">
		  <div id="example"></div>
	</body>
</html>

Open in new window

Gertone (Geert Bormans)

I have taken the obeservation that you can't download Sarissa from that other question.
You should have posted it here

I can show you the code without Sarissa, but first I want to know why...
Is it the license agreement? That one is very open, you can redistribute without a problem
Sarissa is taking away a lot of the cross browser hassle for you.
What difference do you see in downloading Sarissa, versus copying the code I would post here,
unless that my code would not be supported and Sarissa is

Again, I strongly recommend taht you use the sarissa library (all you need is to include one straightforward JS file)
for your benefit and that of your customers, not for my benefit
or give a good reason why you would go for inferior functions

vishey68

ASKER

The customer has mentioned in his ageement that we use only pre authorized downloads. Now to get his authorization i need to explain properly. I am very new to this technical area and the client is very choosy. I was just trying to get thru all this hassle until i understand all the concepts thoroughly. I apolgies if it did not sound the way i intended. Once he gains confidence then in me i will be able to be more forceful
On a side note can you please tell me why have u included html buttons in the xml and xsl.

Again my apologies .

Gertone (Geert Bormans)

Well, you could tell your client that Sarissa is an XML library that creates an abstraction layer for browsers.
This means that all the browser dependencies are hidden away in this libary, and you can uniformly deal with XML, XSLT and passing parameters, without having to take care of browser dependencies yourself.
The library (it is simply a bunch of javascript code) is well maintained, constantly updated for new browser quirks and the creator is following questions up very well. The license is open source. I have used this on many occasions, I had to fight the battle you are fighting a couple of times, and I won over arguments each and every time... even at an international bank with a very strict policy (that was my hardest battle so far)
These days it is almost stupid to not use a library like that. You don't want to be responsible for maintaining all the browser quirks yourself... specially not if there is such a robust alternative at hand... this is simply for your customer the best solution, not only for yourself...
One main selling argument is the cost of maintenance. This will be cheaper to maintain for them, then anything else you could come up with that does an alternative.

Anyway, if you can't get it done, I will do the IE code for you and you can fill in the FF bits

Gertone (Geert Bormans)

I had buttons there to select the XSLT,
you want radio buttons, well, use radio buttons, no problem.
You learned from your other question how to tackle that

I understood that you wanted to see an example of something alike, so you could work on that yourself.
That is what I did

ASKER CERTIFIED SOLUTION

Gertone (Geert Bormans)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

vishey68

ASKER

Once i understand xslt i will again post it