xsl-list
[Top] [All Lists]

RE: XSL and javascript

2003-03-11 15:57:57
I have done it! I am now a javascript master! :D

Here it is for those interested, thanks for the input Tom, a little javascript
research and I figured out how to do it all in java. To my liking, javascript
supports multiple text inputs with the same name, it doesn't have any problem
recursing the elements array, so I use the gmt offset as the name, and pass the 
name
to the time calculator, which returns with the correct time and it updates
element[i].value

Then I modified the xsl to spit out the name of the input based on the offset 
xml
element. I'm so proud of myself :)

        <script language="Javascript1.2">
            <![CDATA[
          function IfZero(num) {
            return ((num <= 9) ? ("0" + num) : num);
          }
          function check24(hour) {
            return (hour >= 24) ? hour - 24 : hour;
          }
          function check60(minutes) {
            return (minutes >= 60) ? minutes - 60 : minutes;
          }
          function GetTime() { 
            var dt = new Date();
            var def = dt.getTimezoneOffset()/60;
            var gmt = (dt.getHours() + def);

            var clockLength = document.clock.length;
            for (i = 0; i < clockLength; i++) {
              var timeZone = document.clock.elements[i].name;
              document.clock.elements[i].value = updateTime(timeZone);
            }
            setTimeout("GetTime()", 1000);
          }
          function updateTime(tz) {
              // We're going to use these offsets:
              var dt = new Date();
              var lhours = dt.getHours();
              var lminutes = dt.getMinutes();
              var lseconds = dt.getSeconds();
              var def = dt.getTimezoneOffset()/60;
              var gmt = (dt.getHours() + def);
              var ending = ":" + IfZero(dt.getMinutes()) + ":" + 
IfZero(dt.getSeconds());
              var altending = ":" + IfZero(check60(dt.getMinutes() + 30)) + ":" 
+
IfZero(dt.getSeconds());
              
              switch (tz) {
                case "local":
                  return (IfZero(dt.getHours()) + ":" + IfZero(dt.getMinutes()) 
+ ":"
+ IfZero(dt.getSeconds()));
                case "p000":
                  return "timezone0";
                case "p100":
                  var timeRet = check24(gmt + 1);
                  return (IfZero(timeRet) + ending);
                case "p200":
                  var timeRet = check24(gmt + 2);
                  return (IfZero(timeRet) + ending);
                case "p300":

                 [SNIP]

inside the city template:
              <tr>
                <td bgcolor="#ffffff">
                  <xsl:element name="input">
                    <xsl:attribute name="type">text</xsl:attribute>
                    <xsl:attribute name="name"><xsl:value-of select="offsetname"
/></xsl:attribute>
                    <xsl:attribute name="value"></xsl:attribute>
                  </xsl:element>
                </td>
              </tr>


[ jeff(_at_)AmeriCom(_dot_)com] 

I found this Javascript code that will show times for 
different time zones and update
a text input field accordingly, the function GetTime is 
called from body onLoad().
The code updates the text fields by their names. What I want 
to do is have a GMT
offset somewhere in the xml, for each of my "city" elements, 
and have this function
update each text input field, is it possible to do this all 
from the XSL stylesheet,
and just pass the gmt offset in an xml element? I was 
thinking I could change this
javascript code to have a for loop that iterates over all the 
cities, but then how is
it going to know what the GMT offset is? 

First of all, you want to get clear just what you want to accomplish and
where it will occur.  In this case, you want some javascript to execute
when the onLoad event fires.  You just need to modify the javascript in
onLoad() to correct for GMT.

Next, think of a way to do it in javascript.  Xslt plays almost no role
in this process.  I would build a dictionary (or associative array, in
javascript) of the offsets keyed by the field name, since you say you
use the field name to set its time.  So create a global javascript
variable, and modify the javascript that sets the code to pick up the
offset from the variable:

var gmt_offsets = {}
gmt_offsets['New York'] = -5
gmt_offsets['Chicago'] = -6
// and so on

If you know the offsets, you can easily have the stylesheet write this
variable into the head element.   

Cheers,

Tom P

 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list




 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list