Solved

How do I pass parameters into xsl dynamically

Posted on 2009-05-09
21
1,709 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
[X]
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
  • 12
  • 9
21 Comments
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 24344571
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
ID: 24347819
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
ID: 24348554
anybody?
0
Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

 
LVL 60

Expert Comment

by:Geert Bormans
ID: 24349475
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
ID: 24349500
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
ID: 24349530
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
ID: 24349558
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
ID: 24349581
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
ID: 24349601
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
ID: 24349607
I am in CET, so I have an hour advantage, good luck tomorrow
0
 

Author Comment

by:d1114170
ID: 24352468
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
ID: 24352502
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
ID: 24352515
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
ID: 24352552
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
ID: 24352604
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
ID: 24352656
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
ID: 24352684
Welcome, don't hesitate to come back here if you need to
0
 

Author Comment

by:d1114170
ID: 24352688
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
ID: 24352704
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
ID: 24352710
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
ID: 24352727
perfect.

Thanks again.
0

Featured Post

Get Actionable Data from Your Monitoring Solution

Your communication platform is only as good as the relevance of the information you send. Ensure your alerts get to the right people every time with actionable responses. Create escalation rules that ensure everyone follows the process and nothing is left to chance.

Question has a verified solution.

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

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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

717 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