Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How To Call XSL Template With Parameter From OnClick Event

Posted on 2003-11-03
6
2,254 Views
Last Modified: 2010-10-05
I need to be able to allow users to click on a link from a summary page and open up a detailed window based on what was chosen.  How do I call an XSL template with a parameter from an OnClick event?

Is this possible with or without javascript?  I have tried many things with no success.

In its simplest form, here's what I'm trying to do.  Thanks!

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml:stylesheet type="text/xsl" href="test.xsl"?>
<INVENTORY>
      <ITEM>
            <ITEM_NO>1</ITEM_NO>
            <SUMMARY_INFO>Summary Info</SUMMARY_INFO>
            <DETAILS>
                  <DETAIL_INFO>Detail Info</DETAIL_INFO>
            </DETAILS>
      </ITEM>
</INVENTORY>

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      <xsl:output method="html" indent="no"/>
      <xsl:template match="/">
            <html>
                  <head>
                        <script language="javascript" type="text/javascript">
                        <!-- //
                              function callDetail(item_no)
                              {
                                    <xsl:call-template name="detail">
                                          <xsl:with-param name="item_input">
                                                <xsl:value-of select="$item_no"/>
                                          </xsl:with-param>
                                    </xsl:call-template>
                              }
                        // End -->
                        </script>
                  </head>
                  <body leftmargin="0" marginwidth="0" topmargin="0">
                        <xsl:variable name="item_no" select="'1'"/>
                        <a href="#" onclick="callDetail($item_no)">
                              &#160;<xsl:value-of select="INVENTORY/ITEM[ITEM_NO=$item_no]/SUMMARY_INFO"/>
                        </a>
                  </body>
            </html>
      </xsl:template>

      <xsl:template name="detail">
            <xsl:param name="item_input"/>
            <html>
                  <head>
                  </head>
                  <body leftmargin="0" marginwidth="0" topmargin="0">
                        <xsl:copy-of select="INVENTORY/ITEM[ITEM_NO=item_input]/DETAIL_INFO"/>
                  </body>
            </html>
      </xsl:template>
</xsl:stylesheet>
0
Comment
Question by:bparmelee
  • 3
  • 2
6 Comments
 
LVL 15

Expert Comment

by:dualsoul
ID: 9676446
hm...i know how to do that with Xalan4J XSL Tarnsformer, may be it will help you, ot at least give some idea:

1) declare stylesheet paramter within your xslt:
.....................
<?xml version="1.0"
encoding="windows-1251"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
xmlns:link="http://www.whitestudio.ru/java/SiteManager.site.LinkGenerator"      
            exclude-result-prefixes="link"
                >
       <xsl:param name="link"/> <!-- here is the stylesheet parameter -->
.....................................

2) use Transformer methods to assign value to this parameter (sample in Java):
      transformer.setParameter("link",link);                  

  I think if you have Transformer object you can do similiar in any language.

Alternative:
     1) use extension-funstions to pass you parameter
 

or i don't understand what do you want? :)
0
 

Author Comment

by:bparmelee
ID: 9680002
I'm not sure how this would allow me to call a template with that parameter from the onClick event in an anchor in the xsl page.  Thanks!
0
 
LVL 15

Expert Comment

by:dualsoul
ID: 9688406
you want just to call template from onClick event?
so use javascript for this, what's wrong?
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 

Author Comment

by:bparmelee
ID: 9690418
I cannot call-template from the javascript.  See the code I posted.  It doesn't work, nor any of the many variations I tried.
0
 
LVL 6

Accepted Solution

by:
PeterCiuffetti earned 500 total points
ID: 9694819
The fundamental problem to the approach you are trying is that the XSL processing instruction...

<?xml:stylesheet type="text/xsl" href="test.xsl"?>

...is done once, immediately upon loading the document resulting in an HTML object.  This result is then like any static HTML file that then goes through Javascript event handling.  The OnClick event handling is done much later when the user starts interacting with the transformed document.  By this time the XSL processing is long over.  XSL template handling is a set of operations that fire when the document is read.  There is no opportunity to influence the processing with user input.

If you want your javascript to perform XSL functionality that varies based on user input, then you have to run your transforms using MSXML and set up runtime parameters using MSXML method calls.

The way you've done it, the value of your variable $item_no is set inside your XSL file and is read only.  To have the XSL processing use a run-time varaible set by user input, you have to use a 'top-level' param (i.e. not iside a template) in the XSL.  These can be modified via the XSLT api with an addParameter instruction  To illustrate, the following XML produces an HTML page with javascript links that each choose a different section of the XML file based on which hyperlink is clicked:


Given the following test document:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml:stylesheet type="text/xsl" href="test.xsl"?>
<INVENTORY>
     <ITEM>
          <ITEM_NO>1</ITEM_NO>
          <SUMMARY_INFO>Summary Info 1</SUMMARY_INFO>
          <DETAILS>
               <DETAIL_INFO>Detail Info 1</DETAIL_INFO>
          </DETAILS>
     </ITEM>
     <ITEM>
          <ITEM_NO>2</ITEM_NO>
          <SUMMARY_INFO>Summary Info 2</SUMMARY_INFO>
          <DETAILS>
               <DETAIL_INFO>Detail Info 2</DETAIL_INFO>
          </DETAILS>
     </ITEM>
     <ITEM>
          <ITEM_NO>3</ITEM_NO>
          <SUMMARY_INFO>Summary Info 3</SUMMARY_INFO>
          <DETAILS>
               <DETAIL_INFO>Detail Info 3</DETAIL_INFO>
          </DETAILS>
     </ITEM>
</INVENTORY>

...and test.xsl stylesheet:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" indent="yes"/>

<xsl:template match="/">
          <html>
               <head>
                    <script language="javascript" type="text/javascript">
                    <xsl:comment> //
                         function callDetail(item_no)
                                     {
                                           // load the detail stylesheet
                                          var xslt = new ActiveXObject("Msxml2.XSLTemplate.4.0");
                                          var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0");
                                          var xslProc;
                                          xslDoc.async = false;
                                          xslDoc.resolveExternals = false;
                                          xslDoc.load("detail.xsl");
                                          if ( xslDoc.parseError.errorCode != 0 ) {
                                            var myErr = xmlDoc.parseError;
                                            alert("You have error " + myErr.reason);
                                          } else {
                                                // process the inventory through the detail stylesheet
                                                xslt.stylesheet = xslDoc;
                                                var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.4.0");
                                                xmlDoc.async = false;
                                                xmlDoc.resolveExternals = false;
                                                xmlDoc.load("test.xml");
                                                if (xmlDoc.parseError.errorCode != 0) {
                                                  var myErr = xmlDoc.parseError;
                                                  alert("You have error " + myErr.reason);
                                                } else {
                                                  xslProc = xslt.createProcessor();
                                                  xslProc.input = xmlDoc;
                                                  // pass the function parameter to the stylesheet and transform
                                                  xslProc.addParameter("item_input", item_no );
                                                  xslProc.transform();
                                                  if (document.all) {       
                                                        document.write(xslProc.output);
                                                  }
                                                }
                                          }
                                     }
                    // End </xsl:comment>
                    </script>
               </head>
               <body leftmargin="0" marginwidth="0" topmargin="0">
                           <!-- Create a link for each item of inventory -->
                           <xsl:for-each select="INVENTORY/ITEM">
                                 <h3>Click below to see item <xsl:value-of select="ITEM_NO"/></h3>
                    <a href="#">
                                    <!-- compute the onclick attribute based on the item_no -->
                                    <xsl:attribute name="onclick">
                                          <xsl:text>javascript:callDetail(</xsl:text>
                                          <xsl:value-of select="ITEM_NO"/>
                                          <xsl:text>)</xsl:text>
                                    </xsl:attribute>
                        &#160;<xsl:value-of select="SUMMARY_INFO"/>
                    </a>
                        </xsl:for-each>
               </body>
          </html>
     </xsl:template>

</xsl:stylesheet>

When you load test.xml into IE, test.xsl will produce a menu of links, one for each inventory item.  Note how the onclick attribute of each link is computed on this first pass using xsl:attribute.  You could have just as easily produced a form with a dropdown list or somthing like that.

The callDetail javascript function takes the parameter and calls another stylesheet (detail.xsl) to output the requested detail.  Note how the xslProc.addParameter passes the function parameter to the detail.xsl stylesheet.  The result of the transformation is then written to the browser.

The detail.xsl looks like this

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:param name="item_input" select="'1'"/>

<xsl:template match="/">
          <html>
               <head>
               </head>
               <body leftmargin="0" marginwidth="0" topmargin="0">
                    <xsl:copy-of select="INVENTORY/ITEM[ITEM_NO=$item_input]/DETAILS/DETAIL_INFO"/>
               </body>
          </html>
</xsl:template>

</xsl:stylesheet>

To run this code, paste the xml into test.xml, the first xsl into test.xsl and the second xsl into detail.xsl.  Then load test.xml with IE.
0
 

Author Comment

by:bparmelee
ID: 9698738
This works great!  Thank you so much!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CRM 2011 Ribbon Workbench vs RibbonDiffXml 44 341
Image decoding from Camera 3 95
SQL XML ALL Nodes Compare in function 2 37
SQL Result Set to XML 4 44
Introduction In my previous article (http://www.experts-exchange.com/Microsoft/Development/MS-SQL-Server/SSIS/A_9150-Loading-XML-Using-SSIS.html) I showed you how the XML Source component can be used to load XML files into a SQL Server database, us…
Browsing the questions asked to the Experts of this forum, you will be amazed to see how many times people are headaching about monster regular expressions (regex) to select that specific part of some HTML or XML file they want to extract. The examp…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question