Differences

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

--- en:user:gs3_sample_format_statements [2016/10/09 23:27] – [Adding javascript into a page] kjdon
+++ en:user:gs3_sample_format_statements [2016/10/12 21:47] – can't use innerHTML if the element already has content kjdon
@@ Line 312: / Line 312: @@
 </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.
+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. And if you are adding this in a classifier which has bookshelves, then it ends up replacing the entire page with the filesize!
-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.
+Instead, we will need to add to the html of the td element. This means we need to give the td element an id so we can find it again.
+If the <td> we are adding the filesize to contains only the filesize, then we can use the element.innerHTML() method to set the content.
 <code>
 <td>
@@ Line 321: / Line 322: @@
   <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>
+However, if this <td> element already has content, then we need to append the filesize, using element.appendChild() and document.createTextNode(). For example:
+<code>
+<td>
+  <xsl:attribute name="id"><gsf:OID/>-fs</xsl:attribute>
+  ...other content here...
+  <script type="text/javascript">
+    document.getElementById(<gsf:html>"</gsf:html><gsf:OID/>-fs<gsf:html>"</gsf:html>).appendChild(document.createTextNode(humanReadableFileSize(<gsf:metadata name="FileSize"/>)));
   </script>
 </td>
@@ Line 332: / Line 345: @@
 We set the text to be the result of calling our function on the filesize metadata.
+To add to an element's content, we find the node using **document.getElementById("id")**, we create a text node using **document.createTextNode("xxx")** and append it to the element using **element.appendChild(node)**.
 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>)
+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 <xsl:text> with the disable-output-escaping attribute set.