Display and filter xml content in drop-down menu

C

cathy

Hi All,

I am having problems displaying content relevant to the option selected
in a drop-down menu. I have an xml document which is running content
through Flash and I need to have the same content on a web page. I am
working in Dreamweaver 8 and code in asp.net (vb).

I need to have a drop-down menu listing available news articles, when
one is selected the article should appear on the page. I have currently
managed to populate the list, but as of yet I have had no luck in
binding it to the page content. I am sure that this is quite simple,
but I am fairly new to xslt etc.

Here is my xml:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="../news.xsl" type="text/xsl"?>
<news>
<news name="article one">
<description>Article one content</description>
<title>the full title of article one</title>
</news>
<news name="article two">
<description>Article two content</description>
<title>the full title of article two</title>
</news>
</news>

Here is my xsl:

<!-- DWXMLSource="data/news.xml" --><!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">]>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:eek:utput method="html" encoding="UTF-8"
doctype-public="-//W3C//XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>my page</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="newstop"><select>
<p>
<xsl:for-each select="news/news">
<option><xsl:value-of select="@name"/></option>
</xsl:for-each>
</p>
</select>
<p class="title"><xsl:value-of select="news/news/title"/></p>
</div>
<div id="news">
<p><xsl:value-of select="news/news/description"/></p>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Thanks in advance.
 
G

Gadrin

I made some changes to the XSL file. I'm used to VBScript so you might
have to re-code using the language you prefer.

This works on my PC with a few changes from the XML you provided....

notably I changed:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="news.xsl" type="text/xsl"?>
<news>
<newsarticle name="article one">
<description>Article one content</description>
<title>the full title of article one</title>
</newsarticle>
<newsarticle name="article two">
<description>Article two content</description>
<title>the full title of article two</title>
</newsarticle>
</news>

I felt "news/news" was too confusing...so I changed to
"news/newsarticle"...

but you should be able to re-produce on your own...


<!-- DWXMLSource="data/news.xml" --><!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">]>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:eek:utput method="html" encoding="UTF-8"
doctype-public="-//W3C//XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>my page</title>
<link href="css.css" rel="stylesheet" type="text/css" />

<SCRIPT LANGUAGE="VBScript"><![CDATA[

function ShowArticle()
dim clicked, ArticleTitle, x, ThisDiv
' find out which OPTION was clicked...
clicked = document.getElementByID("A77").options.selectedIndex
' get its text (article name)
ArticleTitle =
document.getElementByID("A77").getElementsByTagName("OPTION").item(clicked).innerText
'alert ArticleTitle

' loop thru all the DIVs inside the Articles DIV...
for x = 0 to
document.getElementByID("Articles").getElementsbyTagName("DIV").length-1
set ThisDiv =
document.getElementByID("Articles").getElementsbyTagName("DIV").item(x)
'alert ThisDiv.name
' compare their .names to the selected title...then set their
visibility...
if ThisDiv.name = ArticleTitle then
ThisDiv.style.display = ""
else
ThisDiv.style.display = "none"
end if
next
end function

]]></SCRIPT>

</head>
<body>

<div id="newstop">
<select id="A77" onchange="ShowArticle()"> <!-- give SELECT an ID and
an ONCHANGE event -->
<xsl:for-each select="news/newsarticle">
<option>
<xsl:value-of select="@name"/>
</option>
</xsl:for-each>
</select>
</div>

<div id="Articles"> <!-- Create DIV to hold all the articles -->

<xsl:for-each select="news/newsarticle"> <!-- Create a DIV for each
article -->
<div>
<xsl:attribute name="name"><xsl:value-of
select="@name"/></xsl:attribute> <!-- give each DIV a NAME attribute
-->
<xsl:attribute name="style">display:none</xsl:attribute> <!-- make
sure each Article is invisible to start -->
<p><xsl:value-of select="title"/></p>
<p><xsl:value-of select="description"/></p>
</div>
</xsl:for-each>

</div>

</body>
</html>
</xsl:template>
</xsl:stylesheet>
 
T

Tigger25

Thanks for your code, but I couldn't get it to run. I copied all of
your code and swapped it in, but I get this error-
Type mismatch: 'ShowArticle'.

What do you think the problem could be?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Not sure why drop-down is not working. 2
Dropdown menu in a fixed navbar 2
Multi select options in a menu 1
Working on mobile css menu with plenty of frustration! 2
Justify-content not working 1
Horizontal menu bar header 2
I keep getting this error when im trying to show category name. 0
xalan versus ie xml rendering 3

Members online

Total: 69 (members: 2, guests: 67)
Robots: 429

Forum statistics

Threads
473,768
Messages
2,569,575
Members
45,053
Latest member
billing-software

Latest Threads

Top