Text Range and pasteHTML

Question:

I am using an array on the client side to create an HTML string that builds a table of data, which the user can then manipulate. Because the array is on the client side and the user can insert, delete, and change data, I’m using a text range on the body and pasteHTML to render the table to the user.

The table and data appear but none of the events tied to the elements are firing. These events are included in the HTML string. I’ve tried encoding quotes (chr(34)) which ended up making a set of double quotes, no quotes, and a single quote. None of these seem to have any effect. What is odd is that I can do a document.write so that I can see the rendered HTML, copy this to a new page, add in the subs, and the events fire. I’ve searched everywhere and can’t find any topics that would indicate what my problem could be.

Answer:

Event handling can get to be ugly when dealing with dynamically generated HTML. The HTML that is created by using strings will set up the elements, but because the event queue is established during the initial creation of the HTML, events that are established through the use of strings will typically not get passed into the event handling mechanism of the page.

That doesn’t mean that you can’t create events on the fly. In order to make this work, though, you may be better off using the object definitions within DHTML, rather than building the tables from strings. These objects are added within the document object model itself, so they give you a finer level of control, and you can explicitly set events on them as a distinct operation rather than letting the parser try to reconstruct the table from a string.

For the sake of discussion, assume that the table will be contained in a separate DIV element with an id of “dataTableDiv”. This code will add a table to this DIV and attach events to it:

The example in the makeTable() function is fairly pedagogical in nature to show how each of the individual components work. Initially, the DIV is emptied using .innerHTML=””. This works best when you’re recreating the table from scratch after some event. One caveat about this method of deleting elements?if you assign an HTML element in the table to a variable referenced indirectly (for example, set myCell=document.all(“ABC”)), erasing the table using innerHTML will destroy the object references, undoubtedly causing code problems down the road.

The function .createElement() is used to create an HTML element. Because of some inner constraints in the object model, the objects being created must be passed as uppercase entities (document.createElement(“TABLE”) rather than document.createElement(“table”)). The function returns the element just created as an argument.

The elements so created do not yet belong to the “rendering tree” of the page?you can assign properties to these elements, but until the element is attached to the tree, it will not render. The function dataTableDiv.appendChild does just that, appending the table element as the last child of the dataTableDiv element. You can also use .insertBefore to place the new element before an already extant element in the rendering tree.

Because Web designers employ tables so often, Microsoft provided some shortcuts for generating tables. The .insertRow function adds a new row (a object)to the specified table, with the return value holding the row just created (you can also supply a numeric argument to specify where in the table you want the row added). Likewise, .insertCell appends a new cell () to a row object. You can set attributes (including the inner text) of the row or the cell once you have the element’s reference.

Back to the original problem: once you do have a reference to these cell or row objects, you can assign event handlers to them in a similar way to how you assign attributes. The one difference is in the use of getRef(). This function (specific to VBS5) takes the name of a function as an argument, and returns a reference to the function that will be called whenever the event in question takes place. For example, assign the highlightRow function to the onmouseover event, and the restoreRow function to the onmouseout event:

	row.onmouseover=getRef("highlightRow")	row.onmouseout=getRef("restoreRow")

Taken together, these cause the background of the row to change color when the mouse moves over or out of a given row.

So what about situations where VBScript 5.0 is not available (such as older versions of Internet Explorer 4.0)? To be honest, the best solution there is to make use of JavaScript, which has had this capability from the beginning, rather than Visual Basic Script. This is in fact one of the reasons that most Web developers work with JavaScript on the client. You may also be able to short circuit the getRef function using a JavaScript call as well:

In my example, I’ve hard coded values into the makeTable function, although in practice you will almost certainly want to populate the table’s cells using an array, data-binding, or perhaps XML rather than code the values in explicitly. This is the recommended way of creating DHTML output (at least in IE)?not only does it keep the integrity of the rendering tree intact, but it is often an order of magnitude faster to render than working with a string. Once Netscape 5.0 comes on line with its adoption of the W3C document object model, then it will also be cross-compatible between the generation 5 browsers.

Charlie Frank

Charlie has over a decade of experience in website administration and technology management. As the site admin, he oversees all technical aspects of running a high-traffic online platform, ensuring optimal performance, security, and user experience.