AJAX - The Complete Reference

(avery) #1

358 Part II: Developing an Ajax Library^


straightforward though bulky. It first saves the contents of the list item in a temporary
variable. Then it creates a <div> tag with a brief message and a yes and no button, and then
it hides the original content and shows the mini-confirmation dialog. Two callbacks are set
up for the confirmation. A call to clearDelete() will happen when “no” is clicked,
setting the item back to its original state, while a call to deleteItem() will be triggered
when “yes” is selected and will proceed to delete the item via an Ajax call.

function confirmDelete(listItem)
{
/* save old contents which is wrapped in our special span */
var oldContents = listItem.firstChild;

/* make the confirm div */
var confirmDiv = document.createElement("div");
confirmDiv.appendChild(document.createTextNode("Delete Item? "));
var yes = document.createElement("a");
yes.href = "#";
yes.onclick = function(){ return deleteItem(listItem, confirmDiv,
oldContents);};
yes.appendChild(document.createTextNode("y"));
confirmDiv.appendChild(yes);
confirmDiv.appendChild(document.createTextNode(" "));
var no = document.createElement("a");
no.href = "#";
no.onclick = function(){return clearDelete(listItem, confirmDiv,
oldContents);}
no.appendChild(document.createTextNode("n"));
confirmDiv.appendChild(no);

/* hide the current item */
oldContents.style.display="none";
/* set the background color to warn user */
listItem.style.backgroundColor = "red";
/* show the confirm message */
listItem.appendChild(confirmDiv);
return false;
}

The clearDelete() function is very simple, since it just has to set the list item back to
normal by removing the dialog, returning the old contents of the item and resetting the
color.

function clearDelete(listItem, confirmDiv, oldContents)
{
listItem.removeChild(confirmDiv);
oldContents.style.display = "";
listItem.style.backgroundColor = "";
return false;
}

The deleteItem() function isn’t much more difficult, though you should notice that
the actual fading out of the item does not happen until a function called
Free download pdf