By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,214 Members | 2,072 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,214 IT Pros & Developers. It's quick & easy.

Display and filter xml content in drop-down menu

P: n/a
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:output 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.

Jul 31 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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:output 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.selectedInd ex
' get its text (article name)
ArticleTitle =
document.getElementByID("A77").getElementsByTagNam e("OPTION").item(clicked).innerText
'alert ArticleTitle

' loop thru all the DIVs inside the Articles DIV...
for x = 0 to
document.getElementByID("Articles").getElementsbyT agName("DIV").length-1
set ThisDiv =
document.getElementByID("Articles").getElementsbyT agName("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>

Aug 1 '06 #2

P: n/a
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?

Aug 1 '06 #3

P: n/a
I sent you an email with the files.

Gadrin.

Aug 1 '06 #4

P: n/a
Thanks. That all works brilliantly now.

Aug 1 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.