Differences

This shows you the differences between two versions of the page.

--- en:user:gs3_sample_format_statements [2016/10/09 22:51] – [Using javascript to change the display] kjdon
+++ en:user:gs3_sample_format_statements [2016/10/09 23:05] – [Using the javascript in the format statement] kjdon
@@ Line 234: / Line 234: @@
 <code>
-      <gsf:template match="documentNode">
+<gsf:template match="documentNode">
-	<td valign="top">
+  <td valign="top">
-	  <gsf:link type="document">
+    <gsf:link type="document">
-	    <gsf:icon type="document"/>
+      <gsf:icon type="document"/>
-	  </gsf:link>
+    </gsf:link>
-	</td>
+  </td>
-	<td valign="top">
+  <td valign="top">
-          <gsf:metadata name="dc.Title"/>
+    <gsf:metadata name="dc.Title"/>
-	</td>
+  </td>
-        <td>
+  <td>
-          <gsf:metadata name="FileSize"/>
+    <gsf:metadata name="FileSize"/>
-        </td>
+  </td>
-      </gsf:template>
+</gsf:template>
 </code>
@@ Line 255: / Line 255: @@
 <code>
 <td>
-<script type="text/javascript">document.write(humanReadableFileSize(<gsf:metadata name="FileSize"/>));</script>
+<script type="text/javascript">document.write(humanReadableFileSize(<gsf:metadata name="FileSize"/>));
+</script>
 </td>
 </code>
+This lets us check that our function is correct and we are getting the right metadata. However, using "document.write" is not considered good practice.
+Instead, we will need to set the innerHTML of the td element. This means we need to give the td element an id so we can find it again.
+<code>
+<td>
+  <xsl:attribute name="id"><gsf:OID/>-fs</xsl:attribute>
+  <script type="text/javascript">
+    document.getElementById(<gsf:html>"</gsf:html><gsf:OID/>-fs<gsf:html>"</gsf:html>).innerHTML= humanReadableFileSize(<gsf:metadata name="FileSize"/>);
+  </script>
+</td>
+</code>
+Element ids need to be unique, so in this case we will use the document id (<gsf:OID/>) with "-fs" just in case the OID has been used as an id elsewhere in the page. Because we are not assigning a simple string to the id attribute, we need to use the <xsl:attribute> element. We cannot write
+<td id="<gsf:OID/>">.
+To set an element's text, we use document.getElementById("id").innerHTML = "xxx".
+document.getElementById finds the specified element, and element.innerHTML = "xxx" sets its text.
+We set the text to be the result of calling our function on the filesize metadata.
+One further tricky part. We want to write document.getElementById("<gsf:OID/>-fs"). However, the XSL transform process will escape the double quotes with &quot; and then the javascript will be invalid. To get around this, we use <xsl:text disable-output-escaping="yes">"</xsl:text>.
+i.e. document.getElementById(<xsl:text disable-output-escaping="yes">"</xsl:text><gsf:OID/>-fs<xsl:text disable-output-escaping="yes">"</xsl:text>)
+Greenstone provides a shorthand: <gsf:html>"</gsf:html>, which gets resolved to the above <xsl:text> construction.