Next Prev

Flickr Like edit

Read more and download "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.

Here is a quick way to run your own popurls style website

<html>
<head>
<base href="http://www.ajaxdaddy.com/ajax/flickr-like-edit/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<title>Flick-Like Editing Test</title>

<style>
body {
  color: black;
}
input.editMode {
background-color : #FFFF99;
}
textarea.editMode {
background-color : #FFFF99;
}
.savingAjaxWithBackground {
background-color : #FFFF99;
}
.superBigSize {
    font-size: 45px;
    font-weight: bold;
}
td.underlinedTD {
    border-bottom:1px #000000 dashed;
}
table.infoBox {
background-color:#F6F6F6;
border:#999999 double 1px;
font-size:11px;
padding:2px;
}
</style>

<script type="text/javascript">
function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

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

function handleResponse() {
    if(http.readyState == 4){
        if(http.responseText=="name") {
            var replaceText = document.getElementById('person_name').value;
            document.getElementById('name_rg_display_section').innerHTML = replaceText;
            document.getElementById('name_rg').style.display = '';
            document.getElementById('name_hv').style.display = 'none';
        }
        else if(http.responseText=="email") {
            var replaceText = document.getElementById('email_value').value;
            document.getElementById('email_rg_display_section').innerHTML = "<b>Email:</b> " + replaceText;
            document.getElementById('email_rg').style.display = '';
            document.getElementById('email_hv').style.display = 'none';
        }
        else if(http.responseText=="phone") {
            var replaceText = document.getElementById('phone_value').value;
            document.getElementById('phone_rg_display_section').innerHTML = "<b>Phone:</b> " + replaceText;
            document.getElementById('phone_rg').style.display = '';
            document.getElementById('phone_hv').style.display = 'none';
        }
    }
}
        function flashRow(obj) {    
            obj.bgColor = "#FFFF99";
        }
        function unFlashRow(obj) {    
            obj.bgColor = "#F6F6F6";
        }
</script>    
</head>
<body>


<?php 
$editingMyOwn = 1; //Verification code should go here. Set variable to whether user is editing a page they are allowed to.
$firstName = "John";
$lastName = "Doe";
$email = "john.doe@gmail.com";
$phone = "555-555-1234";
?>



<table  cellpadding="3" cellspacing="2" class="infoBox" width="100%">
                                    <tr><td align="right" class="underlinedTD"><b>Contact</b></td></tr>
                                    <tr><td></td></tr>
                                    <?php
                                        if($editingMyOwn ==1) { ?>
                                            <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">
                                                <?php echo $firstName . " " . $lastName; ?>
                                            </div></td></tr>
                                            <tr id="name_hv"><td>
                                            <div id="name_hv_editing_section">
                                                    <input type="text" class="superBigSize editMode" size="<?php $val=strlen($firstName)+strlen($lastName); echo $val; ?>" value="<?php echo $firstName . " " . $lastName; ?>" 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>
                                        <?php } 
                                        else { ?>
                                        <tr>
                                            <td>
                                            <div class="superBigSize"><?php echo $firstName . " " . $lastName; ?></div>
                                        </td></tr>
                                        <?php } ?>
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        <!--<tr><td align="right" class="underlinedTD">Email</td></tr>-->
                                        
                                        
                                        
                                        
                                        <?php
                                        if($editingMyOwn ==1) { ?>
                                            <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> <?php echo $email; ?></div>
                                            </td></tr>
                                            
                                            <tr id="email_hv"><td>
                                            <div id="email_hv_editing_section"><b>Email:</b> 
                                                <input type="text" class=" editMode" size="<?php $val=strlen($email); echo $val; ?>" value="<?php echo $email; ?>" 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>
                                        <?php } 
                                        else { ?>
                                        <tr>
                                            <td>
                                            <div class=""><b>Email:</b> <?php echo $email; ?></div>
                                            </td>
                                        </tr>
                                        <?php } ?>
                                        
                                        
                                        
                                        
                                        
                                        
                                            <?php
                                        if($editingMyOwn ==1) { ?>
                                            <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> <?php echo $phone; ?></div>
                                            </td></tr>
                                            
                                            
                                            <tr id="phone_hv"><td>
                                            <div id="phone_hv_editing_section"><b>Phone:</b> 
                                                <input type="text" class=" editMode" size="<?php $val=strlen($phone); echo $val; ?>" value="<?php echo $phone; ?>" 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>
                                        <?php } 
                                        else { ?>
                                        <tr>
                                            <td>
                                            <div class=""><b>Phone:</b> <?php echo $phone; ?></div>
                                            </td>
                                        </tr>
                                        <?php } ?>
                                
                                        
</table>
</body>

Comment on this example

Micah

2010-07-12 04:09:07

This demo is php?

John

2009-12-04 11:38:56

Umm, Most sites don't put up demos that use php due to them being very basic and not including security and such as those are different topics...... but if you would have clicked the read more button up top the blog post has a example script. It requires knowledge... http://dbachrach.com/blog/wp-content/uploads/2007/01/showAjaxUpdater.php

Vibhuti

2009-11-11 00:38:11

GOOD YAAR BUT ITS NOT SAVING MY EDITED DATA

Mohit

2009-04-22 21:56:35

very good..bt its not saving..

Ipsg007

2009-03-10 09:00:25

extremely slow...

Cheeseguy

2008-12-03 19:02:14

its not working...it sucks

Shaun

2008-11-24 06:57:31

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

Eliskcage

2008-11-21 09:57:02

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?

Sumi

2008-11-07 22:43:08

very nice.it is not saving

Ivan

2008-10-03 11:14:48

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

Memdan

2008-06-10 06:29:50

Ajax est le plus fort

Boygeorge

2008-06-09 03:58:56

It's not working... "SAVING"

Amresh

2008-05-27 02:39:06

I disagree, the sample is not that great. such a poor mix of php and HTML. It is barely customizable. The javascript function is write in ad hoc manner. Its an ideal way how not to write sample code. http://24ways.org/2005/edit-in-place-with-ajax

Smp

2008-05-23 11:18:17

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

Ikea

2008-05-06 02:11:03

Its so slow

Muhammad Amjad Khan

2008-03-20 09:06:40

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

Rajan

2008-03-20 05:15:49

cool guy cool collections

Keusta

2008-03-11 02:28:30

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

Azmeen

2007-12-23 19:11:55

Awesome JS! Thanks for sharing it.

Shilpa

2007-12-13 22:47:52

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

Lawk Salih

2007-11-21 10:02:34

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

Merhaba

2007-11-20 05:35:06

this is very fine

Shabith

2007-11-07 13:26:20

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

Ace

2007-10-28 13:58:19

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

Ooo

2007-10-18 03:32:03

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

Faustino Licud

2007-10-09 19:06:56

hello this is good

Asad

2007-10-03 16:25:32

cool this is very userfriendly

ROB

2007-09-26 14:52:30

HANGS ON SAVING...NO HELP REGARDING SERVER STUFF

Mike

2007-09-25 14:25:40

Wow - Great tutorial

Ashley

2007-09-24 23:51:26

Even this comment box is AJAX ha ha - wow

Ashley

2007-09-24 23:50:56

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

Delang

2007-09-22 02:56:11

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

Jollky

2007-09-09 10:17:21

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

Rakesh

2007-09-06 07:37:45

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

Graham

2007-09-01 04:17:30

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.

Graham

2007-09-01 03:20:31

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.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Flickr Like edit

Comment on this example