Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 401
  • Last Modified:

xslt drop dwon menu with xml data

hello i have a problem. I am trying to create a drop down menu in xslt using xml data, but i don't really know how to do this.
I can post a sample of my xml file.
0
itortu
Asked:
itortu
  • 20
  • 8
1 Solution
 
itortuAuthor Commented:
-<table header="Weather Stick Data DataType=STICK TimeStamp=2006.05.17.1813">
-<row>
<origin>knsd</origin>
<id>KNSDESCON</id>
<station>ESCON</station>
<name>California Center for the Arts</name>
<state></state>
<code>2</code>
<lat>33.12166667</lat>
<lon>-117.0852778</lon>
<day>17</day>
<hour>1106</hour>
<timestamp>2006.04.17.1806</timestamp>
<temperature>72</temperature>
<dewpoint>58</dewpoint>
<relativehumidity>60</relativehumidity>
<windchill>72</windchill>
<heatindex>72</heatindex>
<winddirection>W</winddirection>
<winddirectiondegrees>270</winddirectiondegrees>
<windspeed>7</windspeed>
<windgusts></windgusts>
<pressure></pressure>
<hightoday>72</hightoday>
<lowtoday>54</lowtoday>
<ptendency></ptendency>
<precip24hours>0.00</precip24hours>
<part1>Morning</part1>
<temperature1lo>59</temperature1lo>
<temperature1hi>72</temperature1hi>
<sky1>clearday</sky1>
<part2>Afternoon</part2>
<temperature2lo>69</temperature2lo>
<temperature2hi>71</temperature2hi>
<sky2>clearday</sky2>
<part3>Evening</part3>
<temperature3lo>56</temperature3lo>
<temperature3hi>68</temperature3hi>
<sky3>clearnight</sky3>
<part4>Overnight</part4>
<temperature4lo>54</temperature4lo>
<temperature4hi>55</temperature4hi>
</row>
-<row>
<origin>knsd</origin>
<id>KNSDSNPRN</id>
<station>SNPRN</station>
<name>Balboa High School</name>
<state></state>
<code>2</code>
<lat>37.72194444</lat>
<lon>-122.4397222</lon>
<day>17</day>
<hour>1106</hour>
<timestamp>2006.04.17.1806</timestamp>
<temperature>61</temperature>
<dewpoint>41</dewpoint>
<relativehumidity>44</relativehumidity>
<windchill>60</windchill>
<heatindex>60</heatindex>
<winddirection>W</winddirection>
<winddirectiondegrees>270</winddirectiondegrees>
<windspeed>9</windspeed>
<windgusts></windgusts>
<pressure></pressure>
<hightoday>61</hightoday>
<lowtoday>49</lowtoday>
<ptendency></ptendency>
<precip24hours>0.00</precip24hours>
<part1>Morning</part1>
<temperature1lo>54</temperature1lo>
<temperature1hi>61</temperature1hi>
<sky1>clearday</sky1>
<part2>Afternoon</part2>
<temperature2lo>58</temperature2lo>
<temperature2hi>61</temperature2hi>
<sky2>clearday</sky2>
<part3>Evening</part3>
<temperature3lo>49</temperature3lo>
<temperature3hi>56</temperature3hi>
<sky3>clearnight</sky3>
<part4>Overnight</part4>
<temperature4lo>49</temperature4lo>
<temperature4hi>52</temperature4hi>
</row>
-<row>
<origin>knsd</origin>
<id>KNSDVISTA</id>
<station>VISTA</station>
<name>Guajome Park Academy</name>
<state></state>
<code>2</code>
<lat>33.23055556</lat>
<lon>-117.2491667</lon>
<day>17</day>
<hour>1106</hour>
<timestamp>2006.04.17.1806</timestamp>
<temperature>66</temperature>
<dewpoint>57</dewpoint>
<relativehumidity>70</relativehumidity>
<windchill>66</windchill>
<heatindex>66</heatindex>
<winddirection>W</winddirection>
<winddirectiondegrees>270</winddirectiondegrees>
<windspeed>8</windspeed>
<windgusts></windgusts>
<pressure></pressure>
<hightoday>68</hightoday>
<lowtoday>55</lowtoday>
<ptendency></ptendency>
<precip24hours>0.00</precip24hours>
<part1>Morning</part1>
<temperature1lo>59</temperature1lo>
<temperature1hi>67</temperature1hi>
<sky1>clearday</sky1>
<part2>Afternoon</part2>
<temperature2lo>66</temperature2lo>
<temperature2hi>68</temperature2hi>
<sky2>clearday</sky2>
<part3>Evening</part3>
<temperature3lo>56</temperature3lo>
<temperature3hi>64</temperature3hi>
<sky3>clearnight</sky3>
<part4>Overnight</part4>
<temperature4lo>55</temperature4lo>
<temperature4hi>56</temperature4hi>
</row>
</table>
0
 
itortuAuthor Commented:
so if you see the strucutre, there is a <id> </id> and a <name></name> node
what i need to see on the drop down menu is the name of the location, and when selecting
a different location from the menu retrieve all the weather data for that location.
i have look for ways to do this, but all the xml files that i see on the examples are very different from the one i am working on.

any help is very much appreciatted.


thank you.
0
 
Geert BormansCommented:
Hi itortu,

what do you want in the dropdown?
can you briefly sketch how you want it to look?


Cheers!
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
itortuAuthor Commented:

  NAME OF AREA  <name>                winds       <winddirection>
  TEMPERATURE  <temperature>       dew point <dewpoint>
                                                       humidity   <relativehumidity>

|Select your weather area|           <drop down default display
California Center for the Arts         <drop down item
Balboa High School                       <drop down item
Guajome Park Academy                <drop down item
etc                                              <etc
etc                                              <etc

there can be 20 - 40 names on the list

the drop down should show the list of names, and when you select a different area/ name the weather conditions data are displayed above the drop down menu.
is this congruent to you?
0
 
Geert BormansCommented:
itortu,

ignore my previous message
I didn't seeyour third.

Will you serve this up, or do you want this in a static file, client side
is IE OK in that case, or do you need multiple browsers
you will need some browser specific javascript to get it done
0
 
itortuAuthor Commented:
right now we use IE and firefox this is not an static file. it comes via http.

thank you!
0
 
itortuAuthor Commented:
the transformation occurs server side i don't know if this is best practices though?
0
 
Geert BormansCommented:
itortu,
> the transformation occurs server side i don't know if this is best
> practices though?

for me that is the best practice
then you don't have to worry about cross browser issues

so in fact this is what you can do
- transform the XML into a form with a dropdownlist
- pass the value back
- transform the XML using another XSLT, that takes the form value as a parameter

Are you using ASP and JavaScript?

Geert

0
 
itortuAuthor Commented:
this is what i have so far:

ASP Page

<html>
      <head>
      <link rel="stylesheet" type="text/css" href="style.css">
  <style type="text/css" media="screen"></style>
      
      <%
      dim station
      station = Request.QueryString("station")
      %>
<script language="javascript">
      <!--
      function wxStick()
      {
      var val = document.wxstick.station.options[document.wxstick.station.selectedIndex].value
      window.location="wxsticks.asp?station="+val
      }
      -->
</script>
      </head>
<body class="bgrnd">
<div class="title">Test Drop Down</div>
<%
                  'station= Request.QueryString("station")
                  'Response.Write(station)
            set xml = Server.CreateObject("Msxml2.DomDocument")
            xml.async = false
            xml.setProperty "ServerHTTPRequest", true
            xml.load("http://qwxpsta.myweather.net/qwxpsta/stick/master.xml")
            set xsl = Server.CreateObject("Msxml2.DomDocument")
            xsl.async = false
            xsl.load(Server.MapPath("wxsticks.xsl"))

            xml.transformNodeToObject xsl, Response
            set xml = nothing
            set xsl = nothing
%>

<p>
<form name="wxstick">
<select name="station" size="1" onchange="wxStick()">
<option selected>Select Your Weather Stick</option>
<option value="ESCON">California Center for the Arts</option>
<option value="SNPRN">Balboa High School</option>
</select>
</form>
</p>


</body>
</html>
0
 
itortuAuthor Commented:
XSLT file


<?xml version='1.0' encoding='UTF-8'?>
<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>

<xsl:template match="/table">

<xsl:for-each select="//row[station='$station']">
<div align="left" id="CURRENT">
<table border="0">
<tr>
<td><div id="currently">CURRENTLY</div>
<div id="currentsky"><xsl:value-of select="name" /></div>
<div id="currenttemp"><xsl:value-of select="temperature" /><xsl:text disable-output-escaping="yes">&amp;#176;</xsl:text></div>
</td>
<td align="left" class="currentdata">
<div>Winds: <xsl:value-of select="winddirection" /><xsl:text> </xsl:text><xsl:value-of select="windspeed" /> mph</div>
<div>DewPoint: <xsl:value-of select="dewpoint" /></div>
<div>Humidity: <xsl:value-of select="relativehumidity" /></div>
</td>
</tr>
</table>
</div>
</xsl:for-each>
</xsl:template>
         


</xsl:stylesheet>

0
 
itortuAuthor Commented:
if i could only know how to request the variable "val" from this url constructed on javascript
window.location="wxsticks.asp?station="+val and place that value on the xslt file

<xsl:for-each select="//row[station='$station']">  < here

that would be more than enough by now.
0
 
itortuAuthor Commented:
this is driving me insane!
0
 
itortuAuthor Commented:
i really would like to be able to dynamically populate the drop down menu and changing the selection change the weather data as well, but i have no clue how?
0
 
Geert BormansCommented:
itortu,

this simple XSLT would create your form

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="table">
        <form name="wxstick">
            <select name="station" size="1" onchange="wxStick()">
                <option>Select Your Weather Stick</option>
                <xsl:for-each select="row">
                    <option value="{station}"><xsl:value-of select="name"/></option>
                </xsl:for-each>
             </select>
        </form>
    </xsl:template>
</xsl:stylesheet>
0
 
itortuAuthor Commented:
so this is the xsl that creates the form, how does it know where onchange="wxStick()"> is?
0
 
itortuAuthor Commented:
ok got it it gives me a beautiful menu now full with names!
0
 
itortuAuthor Commented:
sorry for my simple questions, but now that i have all the names in the drop down, how can the weather data be pull from the selected name?
0
 
Geert BormansCommented:
you need a different XSLT that pulls that information out of the XML
you have to make your XSLT transformnode a template processor instead
and pass it a parameter you pull from the http response object

I can help you with that tomorrow, but now I really have to go

cheers

Gertone
0
 
itortuAuthor Commented:
yes i got to go too, i see you here tomorrow,

thanks Gertone.
0
 
itortuAuthor Commented:
hi Gertone, I have been reading about how to create a template processor so a parameter can be pass and pull from the http, and so far i have made little advances.
0
 
Geert BormansCommented:
itortu,

hi, I only just returned to my PC
here is a question I answered to explain the template processor
it is javascript but should be easy to convert to VB script

http://www.experts-exchange.com/Web/Web_Languages/XML/Q_21801176.html

if you are tempted... I don't recommend the approach jkmyoung used in this question
0
 
itortuAuthor Commented:
what would be the differences if done using vbscript besides using dim for the variables instead of var?
0
 
Geert BormansCommented:
This would be the VB-script alternative

         set oXML = Server.CreateObject("Msxml2.DOMDocument.4.0")
         set oXSL = Server.CreateObject("Msxml2.FreeThreadedDOMDocument.4.0")
         set oTmpl= Server.CreateObject("Msxml2.XSLTemplate.4.0")
         dim oProc

         oXML.async = false
         oXML.resolveExternals = false
         oXML.load("result.xml")        

         oXSL.async = false
         oXSL.resolveExternals = false
         oXSL.load("encEntry.xsl")
 
         set oTmpl.stylesheet = oXSL

         set oProc = oTmpl.createProcessor()
         oProc.input = oXML
         oProc.addParameter "parameter", "value"
         oProc.output = Response
         oProc.transform()
0
 
itortuAuthor Commented:
in oreder for this template processor to work, do i have to install any components?

how would the xsl file then change?

i have not been able to make it work yet. i'll keep trying during the week end, i hope to have some results.

thank you Gertone.
0
 
Geert BormansCommented:
well, yes, you need to have msxml4 installed
you can download that from the microsoft website

that would be the recommended way

IE comes with msxml3
so this would work without installing msxml4
         set oXML = Server.CreateObject("Msxml2.DOMDocument.3.0")
         set oXSL = Server.CreateObject("Msxml2.FreeThreadedDOMDocument.3.0")
         set oTmpl= Server.CreateObject("Msxml2.XSLTemplate.3.0")

good luck
0
 
itortuAuthor Commented:
hello Gertone,

after looking at your code, the asp page that I am working on looks like this:

<html>
<head>
<link rel="stylesheet" type="text/css" href="liveweather.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css" media="screen"></style>

                <meta http-equiv="refresh" content="1800">

                <%

                dim station
                station = Request.QueryString("station")

                %>

<script language="javascript">

                <!--

                function wxStick()

                {

                var station = document.wxstick.station.options[document.wxstick.station.selectedIndex].value

                window.location="wxsticks.orig.asp?station="+station

                }

                -->

</script>
</head>
<body class="wxstix">
<div class="title">WEATHER WHERE YOU LIVE</div>
<%

            set oXML = Server.CreateObject("Msxml2.DOMDocument.4.0")
            set oXSL = Server.CreateObject("Msxml2.FreeThreadedDOMDocument.4.0")
            set oTmpl= Server.CreateObject("Msxml2.XSLTemplate.4.0")            

            dim oProc            

            oXML.async = false
            oXML.resolveExternals = false
            oXML.setProperty "ServerHTTPRequest", true
            oXML.load("http://qwxpsta.myweather.net/qwxpsta/stick/master.xml")  
           
            oXSL.async = false
            oXSL.resolveExternals = false
            oXSL.load(Server.MapPath("wxsticks.orig.xsl"))
 
            set oTmpl.stylesheet = oXSL

            set oProc = oTmpl.createProcessor()
            oProc.input = oXML
            oProc.addParameter "parameter", "value"
            oProc.output = Response
            oProc.transform()
           
%>
</body>
</html>

and the xslt file looks like this: (no changes)

<?xml version='1.0' encoding='UTF-8'?>
<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>

<xsl:template match="table">
       
        <form name="wxstick">
            <select name="station" size="1" onchange="wxStick()">
                <option>Select Your Weather Stick</option>
                <xsl:for-each select="row">
                    <option value="{station}"><xsl:value-of select="name"/></option>
                </xsl:for-each>
             </select>
        </form>
       
    </xsl:template>
</xsl:stylesheet>

i am not sure how to use the value of:  oProc.addParameter "parameter", "value"

inside the xsl file ?

if you remember, what I am trying to do is to have the drop down menu populated by the xml station name data, and display the temperature, windspeed, dewpoint, and relativehumidity on the page for the selected station. when the selection changes (station name) then all the other data will change as well.

i have made no advances on this task. I am kind of stuck. Someone suggested that instead of using a template processor, I should just modifie the xml, appending an extra tag and then make this tag the parameter that is passed to the drop down menu. oh well, that also confuses the hell out of me.

If you have time, and patience, would you be willing in show me how this can be achieve? I will try my best to follow you without getting lost.

Thank you Gertone.



0
 
itortuAuthor Commented:
hi again Gertone,

I did some work on the xsl file, and some changes to the asp page, but it isnot working, and I don't know where to go from here?

asp page:

<html>
<head>
<link rel="stylesheet" type="text/css" href="liveweather.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css" media="screen"></style>

                <meta http-equiv="refresh" content="1800">

                <%

                dim station
                station = Request.QueryString("station")

                %>

<script language="javascript">

                <!--

                function wxStick()

                {

                var station = document.wxstick.station.options[document.wxstick.station.selectedIndex].value

                window.location="wxsticks.orig.asp?station="+station

                }

                -->

</script>
</head>
<body class="wxstix">
<div class="title">WEATHER WHERE YOU LIVE</div>
<%
            Dim xml, xsl
            Dim XSLTemplate
            Dim proc

                Set xml = Server.CreateObject("Msxml2.FreeThreadedDOMDocument.4.0")
              xml.async = False
              xml.setProperty "ServerHTTPRequest", true
              xml.loadXML("http://qwxpsta.myweather.net/qwxpsta/stick/master.xml")

              Set xsl = Server.CreateObject("Msxml2.FreeThreadedDOMDocument.4.0")
                  xsl.async = False
              xsl.Load Server.MapPath("wxsticks.orig.xsl")

              Set XSLTemplate = Server.CreateObject("Msxml2.XSLTemplate.4.0")
              Set XSLTemplate.stylesheet = xsl

              Set proc = XSLTemplate.createProcessor

              proc.input = xml
                  proc.addParameter "station", "station"
                  proc.Transform

                  Response.Write proc.output
                  Response.End()

                  Set xml = Nothing
                  Set xsl = Nothing
                  Set proc = Nothing
              Set XSLTemplate = Nothing


%>
</body>
</html>


XSLT file:

<?xml version='1.0' encoding='UTF-8'?>
<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>

<xsl:param name="station" select="/@station"/>

<xsl:template match="table">

<xsl:for-each select="//row[station=$Station]">
<div align="left" id="CURRENT">
<table border="0">
    <tr>
        <td colspan="2">
          <div id="currentsky"><xsl:value-of select="name" /></div>
      </td>
    </tr>
    <tr>
        <td>
          <div id="currently">CURRENTLY</div>
          <div id="currenttemp"><xsl:value-of select="temperature" /><xsl:text disable-output-escaping="yes">&amp;#176;</xsl:text></div>
      </td>
      <td align="left" class="currentdata">
          <div>Winds: <xsl:value-of select="winddirection" /><xsl:text> </xsl:text><xsl:value-of select="windspeed" /> mph</div>
          <div>DewPoint: <xsl:value-of select="dewpoint" /></div>
          <div>Humidity: <xsl:value-of select="relativehumidity" /></div>
      </td>
    </tr>
</table>
</div>
<form name="wxstick">
    <select name="station" size="1" onchange="wxStick()">
        <option>Select Your Weather Stick</option>
        <xsl:for-each select="row">
            <option value="{station}"><xsl:value-of select="name"/></option>
        </xsl:for-each>
    </select>
</form>
       
</xsl:template>
</xsl:stylesheet>
0
 
itortuAuthor Commented:
hey Gertone, are you still around EE? just wondering.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 20
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now