Editar con AJAX


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. // requires prototype.js
  2. function edit(obj) {
  3. Element.hide(obj);
  4. var textarea ='<div id="' + obj.id + '_editor"><input type="text" id="' + obj.id + '_edit" name="' + obj.id + '" value="' + obj.innerHTML + '" size="40">';
  5. var button = '<input id="' + obj.id + '_save" type="button" value="SAVE" /> <input id="' + obj.id + '_cancel" type="button" value="CANCEL" /></div>';
  6. new Insertion.After(obj, textarea+button);
  7. Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
  8. Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
  9. $(obj.id+"_edit").focus();
  10. $(obj.id+"_edit").select();
  11. }
  12.  
  13. function cleanUp(obj, keepEditable) {
  14. Element.remove(obj.id+'_editor');
  15. Element.show(obj);
  16. if (!keepEditable) showAsEditable(obj, true);
  17. }
  18.  
  19. function saveChanges(obj) {
  20. var new_content = escape($F(obj.id+'_edit'));
  21.  
  22. obj.innerHTML = "Saving...";
  23. cleanUp(obj, true);
  24.  
  25. var success = function(t){editComplete(t, obj);}
  26. var failure = function(t){editFailed(t, obj);}
  27.  
  28. var url = 'ajax.php?a=save_title';
  29. var pars = 'id=' + chunkid + '&content=' + new_content;
  30. var myAjax = new Ajax.Request(url, {method:'post',
  31. postBody:pars, onSuccess:success, onFailure:failure});
  32. }
  33.  
  34. function editComplete(t, obj {
  35. obj.innerHTML = t.responseText;
  36. showAsEditable(obj, true);
  37. }
  38.  
  39. function editFailed(t, obj) {
  40. obj.innerHTML = 'Sorry, the update failed.';
  41. cleanUp(obj);
  42. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.