Ajax instant edit

A small piece of javascript reads al SPAN tags, checks if it has class="editText" and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has the ability to edit the field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and 'sends' the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will dissapear again. This is a very simple script which only works with span tags. Text from the span html tag is sent to update.php which process the request. Plain html is returned from the server and this result populates the span.

Ajax instant edit demo

Changes to the code below will update the demo above in real time.



July 16, 2007, 2:26 p.m. - Nick

This example does not work unless you know how and what is in the update.php file Can you please post the update.php file that way it will make this example relevant. Or you can just email it to me at the above address. Thank you.

July 21, 2007, 2:43 p.m. - Nick

The update.php file receives its data via GET so you can simply check for the defined elements and do what ever you want to them via get.

Sept. 13, 2007, 1:44 a.m. - jom bond

The update.php file receives its data via GET so you can simply check for the defined elements and do what ever you want to them via get. email:3507072@gmail.com

Sept. 20, 2007, 1 p.m. - Daniel

When I implement this script it works fine the first time you click on a span to edit, but the second time you click that span it blanks out and doesn't preserve the original value at all. Any ideas why that would happen?

Oct. 2, 2007, 5:24 a.m. - gemicsATgmxNET

Cheers, at mine it works fine, but I could run the storage on txt-files. Please help!

Nov. 21, 2007, 10:04 a.m. - Lawk Salih

How about permissions? Rights to edit the file?

Nov. 25, 2007, 7:36 p.m. - Arevalo

it it's awsome!

Nov. 28, 2007, 6:11 a.m. - Sandeep

Alt special characters not handled!!!!! Eg. º

Jan. 9, 2008, 6:47 p.m. - ameier

a textarea ,a div ,can do it!

May 26, 2008, 1:37 p.m. - chuck

this is awesome. works great. I think that, if needed, people need to remember to but a final echo with the $content at the end of their update.php files. i had forgot it at first and then realized. everything else is simply get and manipulating the data strings.

May 27, 2008, 7:10 a.m. - Tom

You might want to secure this in some way, since it currently permits HTML and scripting to be edited into the field and executed within the SPAN.

Aug. 10, 2008, 1:27 p.m. - Daniel

Having some trouble with <p>, </p> why ?

Aug. 10, 2008, 1:29 p.m. - Daniel

Having some trouble with &lt;p&gt;, &lt;/p&gt; why ? Sorry for the last message =)

Aug. 11, 2008, 11:57 p.m. - Vikas

Its real good

Aug. 18, 2008, 7:59 a.m. - PieterV

I like it but what common use can it have? This is just lame parlor tricks.

Sept. 4, 2008, 9:31 p.m. - Naveen

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sept. 7, 2008, 3:49 a.m. - Kurt

js error, if you delete all text in the field and save that....

Dec. 11, 2008, 4:17 a.m. - anand

Its Really nice to have such sites and regarding the codes-> it is Very nice and understandable.Thank You.

Jan. 5, 2009, 2:31 p.m. - hola

hello hello

Feb. 17, 2009, 2:30 p.m. - Ron

buena pagina

Feb. 18, 2009, 4:01 a.m. - Rupesh kumar

This is very good example.

Feb. 22, 2009, 11:26 p.m. - james

hi, Can forward the complete code for update.php for data base so that we can understand.

March 4, 2009, 2:02 a.m. - Ranjeet 9810544071

i also want save in data base of this value

March 5, 2009, 4:52 a.m. - munmun

can i get the code of this "comment on" form

March 26, 2009, 8:05 a.m. - Adam

this is awesome, but anyone have a coldfusion version? my php knowledge is very limited and dont need it for php.

March 27, 2009, 5:31 a.m. - wasim

a This is smaple comen

April 17, 2009, 2:02 p.m. - Brian

This is nice, and I got it working and all, but how can I get it to save permanently so when the page is refreshed the content is still there.

May 11, 2009, 6:50 a.m. - test

just a test comment

May 26, 2009, 11:07 a.m. - Tharanga

This is Perfect....

June 23, 2009, 8:52 a.m. - Tim

How would you modify this so that it actually saves the text as I type it? at the moment it ignores hard-returns so I couldn't type in a new-line or paragraph....

July 15, 2009, 12:17 p.m. - pratik

this is gr8 man

July 15, 2009, 12:17 p.m. - raju

but can real time changes be seen elsewhere

July 21, 2009, 5:54 a.m. - Sonery

I tried and love it. Thanks for that great sharing.

Aug. 19, 2009, 2:48 a.m. - shaggy

دردشة بوند

Aug. 25, 2009, 8:31 a.m. - Joan

Muchas gracias por este aporte, es imprescindible!

Aug. 31, 2009, 3 p.m. - Nacho

Hi I try to run this script but it dosnt save the information, i can click and type but dont save the information that i type.

Aug. 31, 2009, 3:04 p.m. - Nacho

Hi I try to run this script but it dosnt save the information, i can click and type but dont save the information that i type.

Sept. 25, 2009, 3:12 a.m. - iswear

I like this example.Thank you

Oct. 19, 2009, 5:46 a.m. - calin

it works ok; but if you want for example to write only numbers, how can you check this?

Oct. 27, 2009, 7:48 p.m. - Matt

Great work, thanks a lot!

Jan. 7, 2010, 11:31 a.m. - Bart

I would like to use this script but how can I update the new entered data into my database?

Feb. 21, 2010, 3:26 a.m. - amarushakur

how do i apply validation to ensure that the edited content is also validated before it is saved. i want both client and php server side scripts.

March 10, 2010, 6:45 a.m. - Fxck

pretty nice.

April 26, 2010, 3:56 a.m. - john

Thanks for wounder full site.

June 15, 2010, 10:43 p.m. - Md Rasel

I get help and learn from this

Sept. 19, 2010, 8:20 a.m. - Ireland Dating

Nice and easy, well done. Thanks

Oct. 4, 2010, 6:12 p.m. - Daniel

It just keeps returning "false" in the text field. the update.php is in the same folder. even tried the fix suggested by Sarfraz. Been trying for about an hour, no additional coding, just simply uploaded and test to no avail. atleast the edit box works, but the display of the update is a no go.

Dec. 6, 2010, 6:26 a.m. - Ravi

it's nice.. :)

Feb. 19, 2011, 6:28 a.m. - Mehmet

Thx more sample content please.

May 12, 2011, 1:12 a.m. - Tiago Barbosa

Don't work if the user insert a long text with more than 2.800 characters!!!

Feb. 24, 2012, 5:46 a.m. - J F

if it returns "false" in the text field - find urlBase variable in the script and make sure it points at the directory where update.php is located, by default it is in the root. Or just change urlBase to update.php later in the function where it is actually used

Feb. 27, 2012, 3:40 p.m. - Sofian Oktavianus

This is really work, great :)