Reputation: 7519
I have an xml file which opens with an xslt file:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="eventsoverview.xsl"?>
<events>
<item>
<date>7/5/2013</date>
<time>18:00</time>
<title>Some title</title>
<location>Earth</location>
<id>505</id>
<category>Comedy</category>
<description>Some description</description>
</item>
<item>
<date>7/5/2013</date>
<time>18:00</time>
<title>Some title</title>
<location>Earth</location>
<id>506</id>
<category>Comedy</category>
<description>Some description</description>
</item>
<item>
<date>7/5/2013</date>
<time>18:00</time>
<title>Some title</title>
<location>Earth</location>
<id>507</id>
<category>Comedy</category>
<description>Some description</description>
</item>
</events>
eventsoverview.xsl:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body style="background-color:#EFEFEF;">
<xsl:for-each select="events/item">
<ul>
<li>
<h2 style="color:#9C5D00;">
<xsl:value-of select="title"/>
</h2>
<p>
<xsl:value-of select="description"/>
</p>
</li>
</ul>
<hr/>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Right now, this xslt is displaying brief data about the event. What I want to do is that when I click on the event, it should display the details of the event using the same xml file. How would I go about doing this? Can this be done using multiple xslt files?
Upvotes: 2
Views: 3479
Reputation: 163615
When you want to do something a bit more sophisticated than just using the same XSLT to render the same XML every time, the xml-stylesheet
processing instruction runs out of steam.
You'll need to look at using a Javascript API to invoke the transformations - or better still, look at Saxon-CE, which allows you to write the whole application including the interaction and event handling in XSLT.
Upvotes: 2
Reputation: 3395
In the following example I assume that a click on an event calls the page with a Get-Parameter id
, containing the ID of the event. You would need some server-side logic to insert this ID into your XSL (parameter eventid
in my example). Of course you could also insert this parameter into the XML.
If eventid != 0
you see the details of the events with the respective ID. In my example the details of event 506 are displayed.
If eventid = 0
you see the list of events.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:param name="eventid">506</xsl:param>
<xsl:template match="/">
<html>
<body style="background-color:#EFEFEF;">
<xsl:choose>
<xsl:when test="$eventid = 0">
<xsl:apply-templates/>
</xsl:when>
<xsl:when test="$eventid != 0">
<xsl:apply-templates select="/events/item"/>
</xsl:when>
</xsl:choose>
</body>
</html>
</xsl:template>
<xsl:template match="/events/item">
<xsl:if test="id/text() = $eventid">
<div>
<h2 style="color:#9C5D00;">
<xsl:value-of select="title"/>
</h2>
<p>Description: <xsl:value-of select="description"/>
</p>
<p>Time: <xsl:value-of select="time"/>
</p>
<p>Location: <xsl:value-of select="location"/>
</p>
<p>ID: <xsl:value-of select="id"/></p>
<p>Category: <xsl:value-of select="category"/>
</p>
</div>
<hr/>
</xsl:if>
</xsl:template>
<xsl:template match="/events">
<xsl:for-each select="item">
<ul>
<li>
<h2 style="color:#9C5D00;">
<xsl:value-of select="title"/>
</h2>
<p>
<xsl:value-of select="description"/>
</p>
<xsl:element name="a">
<xsl:attribute name="href">?id=<xsl:value-of select="id"/>
</xsl:attribute>more</xsl:element>
</li>
</ul>
<hr/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Upvotes: 2
Reputation: 167716
With client-side XSLT I would suggest to have the XSLT create HTML with Javascript that hides respectively shows the details when a click event occurs.
Upvotes: 0