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.

Download code Visit demo

Tags: edit-in-place

<< jQuery Tabs Ajax instant edit >>

Flickr Like edit demo

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

<title>Flick-Like Editing Test</title>

var http = createRequestObject();

function sndReq(action) {
    http.open('get', action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

<tr id="name_rg">
                                            <td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
                                            
                                            document.getElementById('name_hv_editing_section').style.display = '';
                                            document.getElementById('name_hv_saving_section').style.display = 'none';
                                            document.getElementById('name_rg').style.display = 'none';
                                            document.getElementById('name_hv').style.display = '';">
                                            <div class="superBigSize" id="name_rg_display_section">
                                                John Doe
                                            </div></td></tr>
                                            <tr id="name_hv"><td>
                                            <div id="name_hv_editing_section">
                                                    <input type="text" class="superBigSize editMode" size="30" value="John Doe" id="person_name" /> <br /><input type="button" value="Save" onClick="document.getElementById('name_hv_editing_section').style.display='none';document.getElementById('name_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=name&val=' + document.getElementById('person_name').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="                        
                        document.getElementById('name_rg').style.display = '';
                        document.getElementById('name_hv').style.display = 'none';
                        "/>
                                            
                                            </div>
                                            <span id="name_hv_saving_section" class="savingAjaxWithBackground">
                                            Saving...
                                            </span>
                                            <script type="text/javascript">
                                                document.getElementById('name_hv').style.display = 'none';
                                                document.getElementById('name_hv_saving_section').style.display = 'none';
                                            </script>
                                        </td></tr>
            
                                        
                                            <tr id="email_rg">
                                            <td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
                                            document.getElementById('email_hv_editing_section').style.display = '';
                                            document.getElementById('email_hv_saving_section').style.display = 'none';
                                            document.getElementById('email_rg').style.display = 'none';
                                            document.getElementById('email_hv').style.display = '';
                                            
                                            ">
                                            <div class="" id="email_rg_display_section"><b>Email:</b> johndoe@gmail.com</div>
                                            </td></tr>
                                            
                                            <tr id="email_hv"><td>
                                            <div id="email_hv_editing_section"><b>Email:</b> 
                                                <input type="text" class=" editMode" size="20" value="johndoe@gmail.com" id="email_value" /> <br /><input type="button" value="Save" onClick="document.getElementById('email_hv_editing_section').style.display='none';document.getElementById('email_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=email&val=' + document.getElementById('email_value').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="document.getElementById('email_rg').style.display = '';
                                 document.getElementById('email_hv').style.display = 'none';"/>
                                                
                                            </div>
                                            <span id="email_hv_saving_section" class="savingAjaxWithBackground">
                                            Saving...
                                            </span>
                                            <script type="text/javascript">
                                                document.getElementById('email_hv').style.display = 'none';
                                                document.getElementById('email_hv_saving_section').style.display = 'none';
                                            </script>
                                        </td></tr>

<tr id="phone_rg">
                                            <td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
                                            document.getElementById('phone_hv_editing_section').style.display = '';
                                            document.getElementById('phone_hv_saving_section').style.display = 'none';
                                            document.getElementById('phone_rg').style.display = 'none';
                                            document.getElementById('phone_hv').style.display = '';
                                            
                                            ">
                                            <div id="phone_rg_display_section"><b>Phone:</b> 0040723100100</div>
                                            </td></tr>
                                            
                                            
                                            <tr id="phone_hv"><td>
                                            <div id="phone_hv_editing_section"><b>Phone: </b>
                                                <input type="text" class=" editMode" size="20" value="0040723100100" id="phone_value" /> <br /><input type="button" value="Save" onClick="document.getElementById('phone_hv_editing_section').style.display='none';document.getElementById('phone_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=phone&val=' + document.getElementById('phone_value').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="document.getElementById('phone_rg').style.display = '';
                                 document.getElementById('phone_hv').style.display = 'none';"/>
                                                
                                            </div>
                                            <span id="phone_hv_saving_section" class="savingAjaxWithBackground">
                                            Saving...
                                            </span>
                                            <script type="text/javascript">
                                                document.getElementById('phone_hv').style.display = 'none';
                                                document.getElementById('phone_hv_saving_section').style.display = 'none';
                                            </script>
                                        </td></tr>
                                        
</table>
</body>

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/