Posted By

tylerhall on 11/30/-1


Tagged

ajax javascript js edit inline


Versions (?)

Who likes this?

195 people have marked this snippet as a favorite

bomberstudios
xaviaracil
Bunker
theferf
Roshambo
drewrockshard
luxuryluke
jamesmcoats
talaris
splorp
rdmey
cochambre
jamiew
jonbaer
Fixe
sena
jkochis
j4k
kgosser
alfonsorv
vbert
nicolaspar
damarev
DenDude
px
yuconner
billtaichi
irdial
dojob
bbuckley
mediahackers
pablazo
atourino
yoshimov
ganu
ttscoff
visualAesthetic
datorrey
anayhk
gdonald
inakiabt
Hansiplus
raws
rmaltete
oso96_2000
bbebop
Hirmine
Snyke
pftqg
Hollow
peterF
Shpigford
assbach
hkmd
pcolton
fugue
noname
Jonanin
koncept
clapfouine
banjomamo
fantomex
matt
KilgoreTrout67
bakuretsu
jacksont123
miyazima
shachi
lamy
jimwoolum
kotnik
Phoenix
d10018
happolati
llbbl
gavinblair
cynic68
alexd0001
hollowmyth
manub
djdykes
mindprint
ingorichter
asimovi
vali29
hudge
neilio
benrasmusen
udayrayala
cusper
gasface
sammylau
i80706
jfherring
hodgie2005
willgarrison
visuallyspun
SmpleJohn
fukami
jessicag79
leachypeachy
penguin999
DFCNT
stphnclysmth
sosof
Zidizei
codehooligans
joellevin
jackShepler
cidibee
dyesin
crs0328
gevika
sergiomco
mb
paullorentzen
bootz15
pyrosuke
pcdevils
Arzakon
mrjthethird
zeusmedia
Glisevask
JimiJay
rodi01
rchk
mmccrack
jeradhill
romanos
blackabee
EvanL
unravelme1
carsparts
PhunkRabbit
kaartz
hsousa
dantreacy
sethetter
iure
osirisinternet
isholgueras
savantstyles
pchengsf
shalomfriss
fauverism
Shujin
kesavanv
seanpowell
bobbym245
capsella
martins
infinidad
mattvbiggs
barbietunnie
0leg
tspitzr
xnet74
Gottio
primetheus
aegony
garthhumphreys
dwenaus
cchitsiang
winworld
Schubidu
creatix
Gordy
julianrhyswilliams
albertomori
robertstefan
logiq
qubestream
benediktvaldez
jondiscipulo
Ideandro
scilec
uberdragon
ubezpieczenia
sbcjr
xmartyxcorex
tmh27
stephen_will
TomasBerckx
finalwebsites
robfahy
webalosarema
clac
ringo380
jschilling
dennywalker
catrinho
vggallego
3polars
qing606
cthorpe


AJAX Edit in Place


 / Published in: JavaScript
 

  1. // Requires prototype.js
  2. function edit(action, 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(action, 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(action, 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 = 'poll-ajax.php?a='+action;
  29. var pars = 'id=' + obj.id + '&content=' + new_content;
  30. var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure});
  31. }
  32.  
  33. function editComplete(t, obj) {
  34. obj.innerHTML = t.responseText;
  35. showAsEditable(obj, true);
  36. }
  37.  
  38. function editFailed(t, obj) {
  39. obj.innerHTML = 'Sorry, the update failed.';
  40. cleanUp(obj);
  41. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: punkyMunky on August 27, 2006
Posted By: luxuryluke on December 28, 2006

This is great, more of the same!

Posted By: daeliur on July 10, 2007

You should really use script.aculo.us, it does the same thing

Posted By: pitje on August 25, 2007

prototype has not so much of a 'web 2.0' name :p

Posted By: cypher on January 13, 2008

A full sample would help even better.

Posted By: SmpleJohn on January 15, 2008

Great example here.

Posted By: SmpleJohn on January 15, 2008

Well, my link didn't work. Here's the full url: http://dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Works great BTW.

Posted By: latope2014 on March 16, 2014

8 Ball Hack 4.3 + Proof - Updated 2014 - 8 Ball Multiplayer Tool - March 2014 - Gratuit

Download : http://www.8ballhack2013.besaba.com Download : http://www.8ballhack2013.besaba.com

New version is available and more easy to use many people send me MSG because they care about people who make fake hack for take they account or new version is very simple and you don't need to provide your email or password just be connected is the only think we ask you before lauch the hack thanks.

You need to login to post a comment.