Example of using JavaScript to edit Information Based on ajax, javascriptajax
This example describes how to edit information in JavaScript Based On ajax. Share it with you for your reference. The details are as follows:
// Requires prototype.jsfunction edit(action, obj) { Element.hide(obj); var textarea ='<div id="' + obj.id + '_editor"><input type="text" id="' + obj.id + '_edit" name="' + obj.id + '" value="' + obj.innerHTML + '" size="40">'; var button = '<input id="' + obj.id + '_save" type="button" value="SAVE" /> <input id="' + obj.id + '_cancel" type="button" value="CANCEL" /></div>'; new Insertion.After(obj, textarea+button); Event.observe(obj.id+'_save', 'click', function(){saveChanges(action, obj)}, false); Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false); $(obj.id+"_edit").focus(); $(obj.id+"_edit").select();}function cleanUp(obj, keepEditable) { Element.remove(obj.id+'_editor'); Element.show(obj); if(!keepEditable) showAsEditable(obj, true);}function saveChanges(action, obj) { var new_content = escape($F(obj.id+'_edit')); obj.innerHTML = "Saving..."; cleanUp(obj, true); var success = function(t){editComplete(t, obj);} var failure = function(t){editFailed(t, obj);} var url = 'poll-ajax.php?a='+action; var pars = 'id=' + obj.id + '&content=' + new_content; var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure});}function editComplete(t, obj) { obj.innerHTML = t.responseText; showAsEditable(obj, true);}function editFailed(t, obj) { obj.innerHTML = 'Sorry, the update failed.'; cleanUp(obj);}
I hope this article will help you design javascript programs.