CODEWITHSUNDEEP
xmlxslt
input
input

Reputation: 7519

XML with multiple XSLT stylesheets

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

Answers (3)

Michael Kay
Michael Kay

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

Matthias Herlitzius
Matthias Herlitzius

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

Martin Honnen
Martin Honnen

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

Related Questions