• 1
• 2
• 3
• 4
• 5

ajax bachrach background bit blog box button buttons call check click code color create css database disabled display div dustin echo edit editing email entire field fields file firstname flickr function hides html input january javascript leave mouse normal page part phone php replacetext request response return row rss run saving script show shows span style table td text title tr tutorial updated user values var website word words written

Keyword Cloud Navigation Map

On one of my web projects I've been working on, we needed to allow the user to edit some information on their profile page. I could have written an HTML form page and then written the php database updater, but why use such outdated interfaces? This is the era of AJAX, and you can't deny it. AJAX is pretty sweet. I decided on using flickr-like editing boxes to do the job. If you are not familiar with how flickr handles editing data, here's a short summary.

1. Show user the data field normally (for instance: the title of a picture)
2. When mouse rolls over that title, make the background of the word yellow
3. 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
4. A user can rename the picture and then push 'save.'
5. Run a little script that updates the name into the database
6. Remove the input box and the buttons and return to the original title display (updated with new title).

Read Full Tutorial...