Advanced Search

Editar con AJAX

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

Expand | Embed | Plain Text

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.