AJAX - The Complete Reference

PART II

Chapter 8: User Interface Design for Ajax 357

the deletion. Visually, the cursor can be changed on mouseover, and you may also define

some hover effect to outline or color to encourage selection.

.deleteBtn {cursor: pointer;}

Binding the trigger event (double- or single-click) to a list item can be done in the HTML

code directly:

<ol id="todoList" class="editable">

<li id="item1">Item #1

<img src="trash.gif" onclick="confirmDelete(this) ;"></li>

<li id="item1">Item #2

<img src="trash.gif" onclick="confirmDelete(this) ;"></li>

...

</ol>

However, a more appropriate way would be to associate the edit actions by inspecting

the classes of tags and binding the edit functions automatically. The library function

AjaxTCR.util.DOM.getElementsBySelector() is used to address this. In a function

bound to window.onload, all the list items that are in a list with a class named editable

are selected. To each of these list items, the delete icon (in this example a trash can) is added

and then bound to the function confirmDelete(), which will verify that the delete

should happen.

window.onload = function ()

{

var listItems = AjaxTCR.util.DOM.getElementsBySelector("OL.editable li");

for (var j = 0; j < listItems.length; j++)

{

var listItem = listItems[j];

var spanWrapper = document.createElement("span");

while (listItem.childNodes.length > 0)

spanWrapper.appendChild(listItem.firstChild );

var deleteImage = document.createElement("img");

deleteImage.src = "trash.gif";

deleteImage.className = "deleteBtn";

deleteImage.onclick = function(e) {return confirmDelete(this

.parentNode.parentNode);};

spanWrapper.appendChild(deleteImage);

listItem.appendChild(spanWrapper);

}

};

There are a few more details to this step, as shown in the preceding code. In particular,

notice the insertion of a <span> tag around the contents of each <li> tag. This wrapper tag

is useful to show and hide items and is a necessary hack as is so often the case with DOM

coding.

When the user clicks the trash icon for a particular list item, the confirmDelete()

function is called, passing the particular list item to delete. This function is fairly