356 Part II: Developing an Ajax Library^
a list with a set of items in it and delete controls, in this case a trash can icon. When you
click the trash can item, the item will be deleted and fade out and be removed from the list
showing the action is completed.Given that an undo function is not offered here, we need to make sure that users really
want to delete. To do this, a confirmation dialog is presented. However, because of the move
of attention away from the activity in question using a standard confirm style, a mini-
confirmation is created in place of the item as shown here.Of course, this is Ajax so we need to actually go to the server for this to make sure it is
OK. A request is issued behind the scenes indicating that the item should be removed. To
show progress, a progress indicator, cursor change, or both may be employed. For
simplicity in this example, a cursor change is used as changing content or adding items
outside the list might be a bit disruptive. However, as the architecture of our demo
application is improved in the next chapter, other indications might be appropriate.Finally, if all is well with the transaction, which it will be in this case since we are faking
confirmations, a transition is used to show the removal of the object. In this case, the deleted
object fades away with a similar fade technique and then the list is reduced.
The first step is to define a list. For now, the list is hard coded in markup in the page and
a class name of “editable” is defined as a flag to the code that it can be edited.<ol id="todoList" class="editable">
<li id="item1">Item #1</li>
<li id="item2">Item #2</li>
<li id="item3">Item #3</li>
<li id="item4">Item #4</li>
<li id="item5">Item #5</li>
</ol>Now, given this list, the items need to be visually shown that they can be deleted. The
trash can icon is displayed and then programmatically bound to the events that will trigger