Lately I’ve been trying to get jQuery working on IE Mobile 6.12 (IEm). Best I’ve managed is to mock up IEm versions of the subset of jQuery API methods that I needed for the project I’m working on. Below are my notes on the particular jQuery methods that presented challenges:

jQuery.clean()

There are a couple of challenges with constructing DOM elements from text:

• DOM elements can only be manipulated when attached to the current document, before you call appendChild(), removeChild() etc. on an element it must be first attached to the current document. I used a scratch <div> element (set to display:none) to which all elements that were to be manipulated were attached for the duration of the manipulation
• It is only possible to create element nodes, you cannot create text or any other kind of DOM nodes. Thus the following cannot be supported on IEm: $('Hello <i>World</i>'). The 'Hello ' text is not contained within a element node, and so cannot be handled on IEm.

find()

I only built support for a subset of this method’s functionality, namely: find element by id, find element by class name, find element by attribute value, and find elements by tag name. In all cases I could only produce reliable results by walking the DOM (which is known to be inefficient across all browsers).

The only way to traverse the IEm DOM is via the childNodes collection, firstChild, nextSibling etc. are not supported. Only element nodes are present in this collection, text within an element is accessed via the innerText property of an element and attributes are accessed via the getAttribute() method. the class attribute is accessible via the className property on an element. The tag name is accessible via the tagName property.

attr()

This method is used in two ways:

• retrieve value of attribute
  • use getAttribute() method to retrieve value
• set value of attribute
  • set the attribute directly e.g. anchor['href']='http://www.oracle.com'

css()

The css for an element be read and written via the element’s style property. e.g. e.style['display'] = 'none';

text()

The text of an element can be read and written via the element’s innerText property

ajax()

IEm supports the same ActiveX XMLHttpRequest (XHR) control as desktop IE, it is instantiated in the usual fashion. Note the IE XHR implementation will only create an XML DOM for responses if the content type is 'text/xml'. To work around this I manually parsed the responseText property if the XHR did not treat the response as XML. The same MSXML ActiveX object as is present on desktop IE is present on IEm.

bind(), change()

IEm does not support binding event handlers via javascript, the event handler must be specified via the relevant onevent attribute in the html. The set of events that are supported on the various HTML elements is very limited, e.g. the onclick event is not supported for <span> elements. When event handlers are invoked they do not receive an event argument, the window.event property found on desktop IE is not present either; the this value does point to the element which originated the event.

For static HTML defined in the html file itself you are left with no choice but write explicit event handlers in the HTML code itself, which is at odds with the jQuery’s principle of separating behaviour from presentation. You may not be able to use the full range of events found on other platforms and you will probably end up having to wrap elements in <div> tags in order to attach event handlers to them.

If you need to bind event handlers to HTML code constructed dynamically – via the $(...) method – then there is a workaround, its not pretty but it will work. By changing the behaviour of the jQuery.clean() method (which is responsible for constructing DOM elements from text), elements to which event handlers might be bound can be rewritten to include a unique id (if not already present) and an explicit event handler. So the following code: $('<a href="#">...</a>') would generate HTML looking something like this: 
<a href="#" id="jQuery.id.37" onclick="jQuery.dispatch('click','jQuery.id.37')">

The jQuery.dispatch() method is a jQuery extension method I defined. It is passed two arguments: the event type and the id of the element which originated the event. jQuery.dispatch() uses this information to lookup an internal associative array to find the event handler(s) bound to the particular event type on the element with the specified id and invokes the handler.

The implementation of the bind() method needs to change to associate the event type and the element’s id with the appropriate event handler in the same associative array that jQuery.dispatch() uses.

The change() method is used to either set the change event handler for an element or to generate an onchange event. It should be adapted to either call bind() or jQuery.dispatch() as appropriate.