Generating DOM events from JavaScript

For the OnTime Group Calendar API Explorer I needed manipulate a dropdown element on the page using JavaScript which is easy enough but when doing it this way no onchange events are emitted which caused my page logic to break. Luckily for me there is a simple way to have the element emit an event using the dispatchEvent mechanism of the DOM. The element.dispatchEvent method is your friend here. The documentation shows you how to create a mouse event but I really needed a HTML based event. To create a such is done like below:

// get element
var elem = document.getElementById("some_dropdown");

// set selected option
elem.selectedIndex = 2;

// generate an 'onchange' event from 'elem'
var event = document.createEvent("HTMLEvents");
event.initEvent("change", true, true);
event.eventName = "change";

Building XPath expression from XML node

When programmatically dealing with large XML (or DXL) documents it is often beneficial to be able to indicate, for logging or similar, which node the processing stopped at or where the “thing” you are logging was found. The simplest way to do this for XML is using XPath. The code below is from a library I wrote and constructs a XPath expression to the org.w3c.dom.Node supplied to the method.

Consider a XML document like the one below and the below table. The left column shows the title we supply to the method and the right column the returned XPath. Notice how the method will try to use “known” attributes to address the specific node (id/name attribute) to make the XPath more readable. If no “known” attribute is found we fall back to the sibling index.

Supplied node XPath
Title node of “Harry Potter and the Chamber of Secrets” bookstore/book[@id=’2′]/title[1]
Second tag node of “Harry Potter and the Prisoner of Azkaban” bookstore/book[@id=’3′]/tags[1]/tag[2]

If you combine this with a nice logging engine like log4j you have a robust solution for reproducing parsing issues.

Use to your heart’s content…

<?xml version="1.0" encoding="iso-8859-1" ?>
  <book id="1">
    <title>Harry Potter and the Philosopher's Stone</title>
  <book id="2">
    <title>Harry Potter and the Chamber of Secrets</title>
  <book id="3">
    <title>Harry Potter and the Prisoner of Azkaban</title>
/* *********************************************************************
 *                    *** DISCLAIMER ***
 * This code is covered by the Creative Commons Attribution 2.5 License
 * (
 * You may use this code in any way you see fit as long as you realize
 * that the code is provided AS IS without any warrenties and confers
 * to rights what so ever! The author cannot be held accountable for
 * any loss, direct or indirect, afflicted by using the code.
 * *********************************************************************

import java.util.Stack;

import org.w3c.dom.Element;
import org.w3c.dom.Node;

 * Utility class for dealing with XML DOM elements.
 * @author Mikkel Heisterberg,
public class ElementUtil {

    * Constructs a XPath query to the supplied node.
    * @param n
    * @return
   public static String getXPath(Node n) {
      // abort early
      if (null == n) return null;

      // declarations
      Node parent = null;
      Stack hierarchy = new Stack();
      StringBuffer buffer = new StringBuffer();

      // push element on stack

      parent = n.getParentNode();
      while (null != parent && parent.getNodeType() != Node.DOCUMENT_NODE) {
         // push on stack

         // get parent of parent
         parent = parent.getParentNode();

      // construct xpath
      Object obj = null;
      while (!hierarchy.isEmpty() && null != (obj = hierarchy.pop())) {
         Node node = (Node) obj;
         boolean handled = false;

         // only consider elements
         if (node.getNodeType() == Node.ELEMENT_NODE) {
            Element e = (Element) node;

            // is this the root element?
            if (buffer.length() == 0) {
               // root element - simply append element name
            } else {
               // child element - append slash and element name

               if (node.hasAttributes()) {
                  // see if the element has a name or id attribute
                  if (e.hasAttribute("id")) {
                     // id attribute found - use that
                     buffer.append("[@id='" + e.getAttribute("id") + "']");
                     handled = true;
                  } else if (e.hasAttribute("name")) {
                     // name attribute found - use that
                     buffer.append("[@name='" + e.getAttribute("name") + "']");
                     handled = true;

               if (!handled) {
                  // no known attribute we could use - get sibling index
                  int prev_siblings = 1;
                  Node prev_sibling = node.getPreviousSibling();
                  while (null != prev_sibling) {
                     if (prev_sibling.getNodeType() == node.getNodeType()) {
                        if (prev_sibling.getLocalName().equalsIgnoreCase(node.getLocalName())) {
                     prev_sibling = prev_sibling.getPreviousSibling();
                  buffer.append("[" + prev_siblings + "]");

      // return buffer
      return buffer.toString();