Solved

How do I pass parameters into xsl dynamically

Posted on 2009-05-09
21
1,703 Views
Last Modified: 2013-11-18
Gooday,
I have an xml file that I am trying to modify using xsl but would like to have a menu where the user can click through the different options and modify the xsl to show the relevant data depending on the menu button that was clicked.

Let me know if you would like to see the xml code.

I have created part of an xsl file if you would like to have a look at that too. In essence at the moment I have created a variable that determines the continent to display. Then created n onclick js function that reloads the xml and xsl files and attempts to pass a new parameter back through but this is not working.
This is very important and I need a lot of help in getting this working
0
Comment
Question by:d1114170
  • 12
  • 9
21 Comments
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
How do you perform the javascript

- is this ASP, using the msxml activeX component
- is this in the browser, IE only, using the same component
- is this in a browser, using a library to make the scripts browser independent, such as Sarissa (highly recommended by the way)

In any cas you need to make the parameter that you want to get a value in teh XSLT global
the <xsl:param name="whatevername"/> should be a direct child of the xsl:stylesheet element

you need to create some sort of template processor in the JavaScript for running the XSLT
and then you likely need to use "addParameter" one way or another

If you show me how you do the XSLT transform, I can give you teh exact javascript code you need
0
 

Author Comment

by:d1114170
Comment Utility
Hi,

here is my javascript at the moment. its embedded within the xsl.
function loadXMLDoc(xmlName){
              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(xmlName);
                return(xmlDoc);
                }

                function displayResult(CID)
                {
                var contentDiv = document.getElementById("xslReload")
                contentDiv.innerHTML = "";
                xml=loadXMLDoc("xmloffer.xml");
                xsl=loadXMLDoc("tester.xsl");
                // code for IE
                if (window.ActiveXObject)
                  {
                    ex=xml.transformNode(xsl);
                    document.getElementById("xslReload").innerHTML=ex;
                    //div to be populated
                  }
                  // code for Mozilla, Firefox, Opera, etc.
                  else if (document.implementation
                  && document.implementation.createDocument)
                  {
                    xsltProcessor=new XSLTProcessor();
                    xsltProcessor.importStylesheet(xsl);
                    xsltProcessor.setParameter('', "continentID", CID);
                    //pass new parameter through to xsl to determine output
                    resultDocument = xsltProcessor.transformToFragment(xml,document);
                    contentDiv.appendChild(resultDocument);
                  }
                 
                }
contentDiv is the place where I want the xsl results to be loaded into.

I cant use any serverside scripting so needs to all be within the xsl using javascript please.
If you would like to see the xml please let me know.

many thanks
0
 

Author Comment

by:d1114170
Comment Utility
anybody?
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
Well, it is a Sunday and mothersday, so I have not been working this afternoon... some patience please

There are many things not OK in your example,
I am improving the code now,
more news in half an hour or so.
Please delete your recent duplicate question, since it is EEs policy to not allow duplicate questions
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
The code for IE and FF is not equivalent.
Which browser you want this to work for?
If the answer is both, I highly recommend that you use Sarissa library.

Please start by downloading Sarissa from sourceforge
0
 

Author Comment

by:d1114170
Comment Utility
Hi, sorry about that. I just wasnt sure if it was working ok.
I will delete my second post now. thanks.

yeah I need it to work in both browsers.
ok, i will look into downloading sarissa now.

look forward to seeing your code.

many thanks
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
Here is a full working html
<!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("xmloffer.xml");

		  //alert(new XMLSerializer().serializeToString(oXML));

		  

		  // create an object from the xsl

		  var oXSL = Sarissa.getDomDocument();

		  oXSL.async = false; 

		  oXSL.load("tester.xsl");

		  //alert(new XMLSerializer().serializeToString(oXSL));

		  

		  function displayResult(CID)

		    {

		      var xsltProc  = new XSLTProcessor();

		      xsltProc.importStylesheet(oXSL);

		      xsltProcessor.setParameter('', "continentID", CID);

		      var transformResult = xsltProc.transformToDocument(oXML);

		      // alert(new XMLSerializer().serializeToString(transformResult));

		      document.getElementById("xslReload").innerHTML = new XMLSerializer().serializeToString(transformResult);

		    }

	

		  // -->

	    </script>

	</head>

	<body onload="showDetail('0');">

		  <div id="xslReload"></div>

	</body>

</html>

Open in new window

0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
From the Sarissa package, copy the sarissa.js and sarissa_ieemu.js files in a subdirectory script (or change the path in line 6 and 7 of the code I posted)

If I do over-rides in Ajax style in html pages, I always replace the innerHTML of an identified div

Two things you need to take care off
- <xsl:param name="continentID"/> requires to be a direct child of the xsl:stylesheet element
- the result of your xsl transform needs to be wellformed XML (so you need one root element)
I most always make this the first active template
<xsl:template match="/">
  <div>
    <xsl:apply-templates/>
 </div>
</xsl:template>

this creates an extra div, but at least you know the result is wrapped in a single root
also set the serialisation to xml explicitely
<xsl:output method="xml" indent="yes"/>
0
 

Author Comment

by:d1114170
Comment Utility
Hi Gertone,
I wil have to try this out in the morning now as I am in the UK and have other commitments on a sunday evening.
Thank you very much and I will be in touch tomorrow morning.
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
I am in CET, so I have an hour advantage, good luck tomorrow
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:d1114170
Comment Utility
Morning Gertone,
I have just had a chance to aply about with the code you have given me and it seems fine, but is not displaying any of the xml data.
This, I am assuming is down to my poor xsl file?!
Obviously this does need a lot of work but at the moment I am just trying to get it to out put the correct data.
I'll attach what I have so far to see if you can improve it for me please.
Please also find attached a snippet of my xml code.
Thanks
<Offers>

	<Continent>

		<CID>A</CID>

		<Country>

			<Name><![CDATA[Canada ]]></Name>

			<Fare>

				<DestFrom>London Heathrow</DestFrom>

				<DestTo>Toronto  - Direct</DestTo>

				<BookBy>28/04/2009</BookBy>

				<TravelFrom>09/04/2009</TravelFrom>

				<TravelTo>17/06/2009</TravelTo>

				<Price>325</Price>

				<Eligibility>Everyone</Eligibility>

				<CallToAction>online</CallToAction>

				<Link><![CDATA[http://*****]]></Link>

				<Airline>British Airways</Airline>

				<LogoSRC>britishairways</LogoSRC>

				<freetext></freetext>

				<topoffer>True</topoffer>

				<topofferlink>http://***</topofferlink>

				<creationdate>08/08/09</creationdate>

			</Fare>

Open in new window

draft.txt
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
Oh, I see what you are doing
The javascript should be driving the XSLT, the XSLT should not drive the javascript.
The code I send you is the HTML (with JavaScript that you need to open in the browser

So you need to put all the static information in the html file
and only the XML dynamic part should be driven by the XSLT
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
Your XSLT should look more like this
<?xml version="1.0" encoding="utf-8" ?>

<xsl:stylesheet version="1.0"

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    

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

    

    <xsl:variable name="sf_urlbase">http://www.*****</xsl:variable>

    <xsl:variable name="call_page_url"/>

    <xsl:variable name="logo_path">http://www.*******/images/xmlfares/logos/</xsl:variable>

    <xsl:variable name="blue_logo_path">http://www.*****/images/blue.png</xsl:variable>

    <xsl:variable name="sta_logopath"/>

    <!-- Texts -->

    <xsl:variable name="sf_prefix_rss_link">Get cheap flights for</xsl:variable>

    <xsl:variable name="sf_conjuncion_rss_link">as</xsl:variable>

    <!-- Product Table Elements -->

    <xsl:variable name="sf_destination">Destination</xsl:variable>

    <xsl:variable name="sf_airline">Airline</xsl:variable>

    <xsl:variable name="sf_travelrange">Travel Between</xsl:variable>

    <xsl:variable name="sf_book_by">Book By</xsl:variable>

    <xsl:variable name="sf_travel_between"/>

    <xsl:variable name="sf_eligibility">Eligibility</xsl:variable>

    <xsl:variable name="sf_price_from">From</xsl:variable>

    <xsl:variable name="sf_price_currency">£</xsl:variable>

    <xsl:variable name="sf_no_result">Currently there are no top fares available.</xsl:variable>

    <xsl:variable name="sf_button_phone">Call 0870 * *** ***</xsl:variable>

    <xsl:variable name="sf_button_online">Book Now</xsl:variable>

    <!-- Continents -->

    <xsl:variable name="sf_continent_a">North America</xsl:variable>

    <xsl:variable name="sf_continent_b">Europe</xsl:variable>

    <xsl:variable name="sf_continent_c">Asia</xsl:variable>

    <xsl:variable name="sf_continent_d">Australasia</xsl:variable>

    <xsl:variable name="sf_continent_e">Latin America</xsl:variable>

    <xsl:variable name="sf_continent_f">Africa</xsl:variable>

    <xsl:variable name="sf_continent_g">Middle East</xsl:variable>

    <xsl:variable name="sf_continent_h">Caribbean</xsl:variable>

    <xsl:variable name="sf_continent_i">Central America</xsl:variable>

    <xsl:variable name="sf_continent_default">Other Specials</xsl:variable>

    <xsl:template name="blue_image">

        <img alt="blue ticket" height="13" src="{$blue_logo_path}" width="31"/>

    </xsl:template>

    <xsl:variable name="continentID">A</xsl:variable>

    <xsl:variable name="continentDisp" select="Offers/Continent[CID=$continentID]" />

    

    <xsl:template match="/">

                <div>

                    <div class="Tab">

                        <a href="#" onclick="displayResult('All')">All</a>

                    </div>

                    <div class="Tab">

                        <a href="#" onclick="displayResult('A')">A</a>

                    </div>

                    <div class="Tab">

                        <a href="#" onclick="displayResult('B')">B</a>

                    </div>

                    <div class="Tab">

                        <a href="#" onclick="displayResult('C')">C</a>

                    </div>

                    <div class="TabDiv" id="continentTab">

                        <xsl:apply-templates select="Offers" />

                    </div>

                </div>

     </xsl:template>

    

    <xsl:template match="Offers">

        <xsl:call-template name="header" />

        <xsl:value-of select="$continentDisp"/>

    </xsl:template>

    

    <xsl:template name="header">

        <div class="Headers">

            <div class="tblHeader">

                <xsl:value-of select="$sf_destination"/>

            </div>

            <div class="tblHeader">

                <xsl:value-of select="$sf_airline"/>

            </div>

            <div class="tblHeader">

                <xsl:value-of select="$sf_travelrange"/>

            </div>

            <div class="tblHeader">

                <xsl:value-of select="$sf_book_by"/>

            </div>

            <div class="tblHeader">

                <xsl:value-of select="$sf_eligibility"/>

            </div>

            <div class="tblHeader">

                <xsl:value-of select="$sf_price_from"/>

            </div>

        </div>

    </xsl:template>

    

</xsl:stylesheet>

Open in new window

0
 

Author Comment

by:d1114170
Comment Utility
Wow, thanks for the quick response.
I see. I am now running the html as instructed by yourself but am not getting xml data through?
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
make sure all the paths are OK
- the paths to the Sarissa library files
- the paths to XML and XSL

Then you can take away the "//" in front of the allerts
so you can see if the XML and XSL files get properly loaded

Let me know what you see in the popup boxes
0
 

Author Comment

by:d1114170
Comment Utility
Thank you.
The first box was empty so checked my xml and it was not pointing to my most up-to-date xml file.

Thanks for all your help.

Ill mark this as solution but may need help further down the line but will start a new trhead as you deserve the points.

Thanks Gertone.
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
Welcome, don't hesitate to come back here if you need to
0
 

Author Comment

by:d1114170
Comment Utility
ah, sorry.
I spoke too soon.

Although now it loads fine the variable does not change onlclick, it will just display what the variable is hardcoded as in the xsl. If the variable is blank then regardless of what button is clicked and what variable is passed it is blank?

sorry gertone.
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
I don't think you have a
<xsl:param name="continentID"/>
in your XSLT at the top level
0
 
LVL 60

Accepted Solution

by:
Geert Bormans earned 500 total points
Comment Utility
Ah, I see,
you have
    <xsl:variable name="continentID">A</xsl:variable>
that will not work, only xsl:param will receive values from outside the scope

try this instead
   <xsl:param name="continentID">A</xsl:param>
0
 

Author Comment

by:d1114170
Comment Utility
perfect.

Thanks again.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…

771 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now