Flickr Like edit

If you are not familiar with how flickr handles editing data, here's a short summary. - Show user the data field normally (for instance: the title of a picture) - When mouse rolls over that title, make the background of the word yellow - If the user clicks on the word, change that word to a input box with the word in it. Also show a 'save' and 'cancel' button - A user can rename the picture and then push 'save.' - Run a little script that updates the name into the database - Remove the input box and the buttons and return to the original title display (updated with new title). It shows how to write a little code to emulate flickr edit style effect almost perfectly. The script is not using any third party libraries. There is a lot of html code involved, i don't recommend it if you intend to use a 'plugin' like edit in place script. On top of that, php and html is mixed together meaning more difficult to customize the script.

Flickr Like edit demo

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



Sept. 1, 2007, 3:20 a.m. - Graham

This one isn't as obvious to get working as some of the others. Just sits saying saving. Will need to look into this one a bit.

Sept. 1, 2007, 4:17 a.m. - Graham

oops sorry for the double post. As per the comments on Dustin's site, I cannot for the life of me get the save working. Anyone been able to get this working? I've tried locally on my dev server and also live on my webserver.

Sept. 6, 2007, 7:37 a.m. - Rakesh

when you edit and same, it just keeps on saying saving...please explain or provide a fix. thanks

Sept. 9, 2007, 10:17 a.m. - Jollky

I'm not sure code above is work. How about "saving..."?

Sept. 22, 2007, 2:56 a.m. - delang

look great. i already done almost the same thing too but this one more better.

Sept. 24, 2007, 11:50 p.m. - Ashley

This site is very handy, great work, keep it up

Sept. 24, 2007, 11:51 p.m. - Ashley

Even this comment box is AJAX ha ha - wow

Sept. 25, 2007, 2:25 p.m. - Mike

Wow - Great tutorial

Sept. 26, 2007, 2:52 p.m. - ROB

HANGS ON SAVING...NO HELP REGARDING SERVER STUFF

Oct. 3, 2007, 4:25 p.m. - asad

cool this is very userfriendly

Oct. 9, 2007, 7:06 p.m. - faustino licud

hello this is good

Oct. 18, 2007, 3:32 a.m. - ooo

it would be great if u pu some help about php related files... ;)

Oct. 28, 2007, 1:58 p.m. - Ace

Definitely needs improving. Unless the demo works I don't touch it. BETA

Nov. 7, 2007, 1:26 p.m. - shabith

it doent working?? just saying "saving..."

Nov. 20, 2007, 5:35 a.m. - merhaba

this is very fine

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

This would be very useful for someone who works a lot with data and data entry. Edit right on the spot.

Dec. 13, 2007, 10:47 p.m. - shilpa

nice. please and veryuseful . can u please send more tutorials to me. i want to learn most of it.

Dec. 23, 2007, 7:11 p.m. - Azmeen

Awesome JS! Thanks for sharing it.

March 11, 2008, 2:28 a.m. - keusta

here is the other php file that we need for saving the link is just under the post title guys !!!

March 20, 2008, 5:15 a.m. - rajan

cool guy cool collections

March 20, 2008, 9:06 a.m. - Muhammad amjad khan

very nice effort, i love ajax, please send me more like these stuff.

May 6, 2008, 2:11 a.m. - Ikea

Its so slow

May 23, 2008, 11:18 a.m. - smp

tried incorporating with cold fusion, database is updating, but saving.... message hanging -- any thoughts????

June 9, 2008, 3:58 a.m. - boygeorge

It's not working... "SAVING"

June 10, 2008, 6:29 a.m. - Memdan

Ajax est le plus fort

Oct. 3, 2008, 11:14 a.m. - Ivan

NO FUNCIONA QUE PASO AQUI !! CARAMBA QUIERES ENSEÑAR O QUE TE ENSEÑEN

Oct. 28, 2008, 9:10 a.m. - bin

Just here to seeee

Nov. 7, 2008, 10:43 p.m. - sumi

very nice.it is not saving

Nov. 21, 2008, 9:57 a.m. - eliskcage

very annoying making people think they will have a page altering shoutbox (look at all the angry people) I have made a flatfile version but why would I share it when there's retards like you around?

Nov. 24, 2008, 6:57 a.m. - Shaun

I like this a lot going to use it in my website i think just for fun!

Dec. 3, 2008, 7:02 p.m. - cheeseguy

its not working...it sucks

Feb. 13, 2009, 4:13 a.m. - Oktay

:D very very good =)

March 10, 2009, 9 a.m. - ipsg007

extremely slow...

April 22, 2009, 9:56 p.m. - mohit

very good..bt its not saving..

May 20, 2009, 12:20 p.m. - Alex

nice, bookmarked!

May 21, 2009, 1:01 a.m. - Anu Mittal

very nice & intresting ex.but i didn,t understand properly

May 21, 2009, 1:05 a.m. - Anu Mittal

very nice & intresting ex.but i didn,t understand properly code of ajax.plz send me other example like this and coding with comments.

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

Ya Its Too Slow..

June 6, 2009, 9:29 a.m. - nurettin

thanks this script very good ;)

July 21, 2009, 5:50 a.m. - Film izle

Very useful code. thank for sharing

Sept. 29, 2009, 12:10 a.m. - kinnoy5

Gotta say u guys help me a lot on this. Thx u ^^. This codes very useful for me

Nov. 11, 2009, 12:38 a.m. - vibhuti

GOOD YAAR BUT ITS NOT SAVING MY EDITED DATA

Dec. 11, 2009, 9:13 p.m. - alex

werwer w erwe rwe r

Dec. 29, 2009, 9:03 p.m. - Abbujaan

yaha pe to sab choo desi bhare hue hai. ewwwww

Jan. 5, 2010, 6:08 a.m. - Slots machines online

How can i edit this page?

Feb. 7, 2010, 12:19 p.m. - Ivan

Sorry to post it here,your contact page doesn't work :(

June 8, 2010, 11:33 a.m. - Steve

Comment on this

July 12, 2010, 4:09 a.m. - Micah

This demo is php?

Sept. 6, 2010, 9:01 a.m. - Ansen

very good tks!

Nov. 11, 2010, 8:02 a.m. - Pete D

I like this tutorial, thanks

May 5, 2011, 2:26 a.m. - DvdOuden

You'll need a php file named updateProfileAjax.php with the following content: <?php echo $_GET['part']; ?> That should make it work :) See the original: http://dbachrach.com/blog/2007/01/create-flickr-like-editing-fields-using-ajax-css/