PART II
Chapter 8: User Interface Design for Ajax 359
finishRequest() is invoked. This function will not be called until the Ajax call triggered
by the ever-present sendRequest() function returns. Even the relatively small latency of
an Ajax request may make this less immediate than desired. However, consider the issue of
allowing the deletion to happen quickly without confirmation from the server in the case
that such a confirmation fails. This introduces the problem of having to put things back to
some retained state adding much complexity to the process. We will take up architectural
decisions like this in the next chapter.function deleteItem(listItem, confirmDiv, oldContents)
{
oldContents.style.display = "";
confirmDiv.style.display = "none";
var deleteButtons = AjaxTCR.util.DOM.getElementsByClassName("deleteBtn",
oldContents);
if (deleteButtons)
deleteButtons[0].style.display = "none";
if (listItem)
{
var url = "http://ajaxref.com/ch8/echo.php";
var payload = "message=" + AjaxTCR.data.encodeValue("<h3>Message from
the server:</h3><tt>Item #" + listItem.id.substring(4) + " deleted.</tt>");
sendRequest(url, payload, listItem);
}
return false;
}To see the full code and play with the first step of the to-do list example, visit http://
ajaxref.com/ch8/deletelist.html.Patterns of Immediacy
To meet user expectations, developers need to deliver on the speed promise of Ajax. Speed
is not limited to just data transmission or network speed but also includes interface speed.
To users unaware of the change in plumbing, Ajax simply is the promise of immediacy. To
fulfill expectations, Ajax developers must consider all aspects of interface design that
deliver fast response and direct manipulation. Instead of clicks to bring up an edit dialog
and then more clicks to save to the server, Ajax applications can have a direct click-to-edit
with an implicit save. Selecting objects and then applying actions to them with clicks or
keystrokes could be replaced with direct interaction with a drag-and-drop interface. Even if
the data is not immediately sent to the server via a back-channel communication, such
interface changes should be adopted in Ajax applications. While some might consider the
inclusion of such widgets in this discussion simply the rebranding of old DHTML GUI
widgets under a new Ajax moniker, from a user’s point of view, they are certainly just as
much a part of the Ajax equation as incremental data fed drop-downs, autosuggestion
fields, and instant validation widgets. So without further delay, we’ll now provide a brief
overview of some of the more popular interface conventions and widgets surfacing in
modern Ajax applications.