366 Part II: Developing an Ajax Library^
input.focus();/* set save trigger callback */
input.onblur = function(){save(elm, input,orig);};
}In the save() function, the saved value found in the editable area is compared to the
original value so making a network call can be avoided unless one is needed.function save(elm, input, orig)
{
/* check if content is the same if so bail out */
if (orig == input.value)
{
elm.innerHTML = orig;
return;
}
/* escape the content to avoid XSS problems */
var message = input.value.replace(/<([^>]*)>/g, "<$1>");
/* set content to edited value */
elm.innerHTML = message;
/* save content via Ajax call */
var url = "http://ajaxref.com/ch8/echo.php";
var payload = "message=" + AjaxTCR.data.encodeValue("<h3>Message from the
server:</h3> The value was changed to: <tt>" +message + "</tt>");
sendRequest(url, payload);
}The complete version of an editable list can be found at http://ajaxref.com/ch8/
clicktoeditlist.html and is shown in action in Figure 8-9.FIGURE 8-9 Click-to-edit list