Create flickr-like Editing Fields Using AJAX & CSS
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.
- 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).
Notice how this entire process requires no page refreshes, and after one use becomes completely intuitive.
What I will show you is how to write a little code to emulate this effect almost perfectly.
First, let’s take a look a what the end result will be:
Click here to see it in action.
Roll over any of the fields and notice how the words highlight. You can click them and edit them. Note: database saving is disabled for this demo. Everything will work exactly like it will on your server, but edited values are not written to a database, so after a refresh the default values will reappear.
Click here for the entire html file. I am going to break it apart into pieces below and explain it. Some of the lines in that html file are omitted because they are specific for this example. You will most likely not need them.
<style>
input.editMode {
background-color : #FFFF99;
}
textarea.editMode {
background-color : #FFFF99;
}
.savingAjaxWithBackground {
background-color : #FFFF99;
}
</style>
We set up our style information here. The editMode css style will be our rollover for editable fields. savingAjaxWithBackground is for when we display the words saving while we are updating the value on the server.
<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);
}
This is typical AJAX setup code. We create a object for handling the AJAX based on the browser. The sndReq function sends an asynchronous request to a url (’action‘). I am now going to jump down and skip the handleResponse function until later.
function flashRow(obj) {
obj.bgColor = “#FFFF99″; // This is the flash color, typically a light yellow
}function unFlashRow(obj) {
obj.bgColor = “#F6F6F6″; // This is the original background color
}
</script>
These are the final 2 javascript functions. They are quite simple. We will call these on mouse enters and mouse exits. Next up is some php:
<?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″;
?>
These values will probably be pulled from your cookie, session or database calls. I am setting them explicitly for the sake of simplicity in this example. The next part is the actually html, although it includes some php and javascript. I am just going to show one (the name field) since all the other fields are basically the same. You can see the others in the full html file.
<?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 = ”;“>
This code should go inside a <table> tag. Our little bit of php here will check whether we are allowed to edit the value. We then create a table row with an id value. The rg means ‘regular,’ and the hv means ‘hover.’ The hv divs are for the editing. After that, we create a td which will call those javascript functions we already wrote when the mouse enters and exits. The onClick event does 4 main things. It will show the entire editing table row (name_hv), while hiding the normal table row (name_rg). The first two lines of javascript will show the editing part, but not the saving part. This will become clear later in the code.
<div class=”superBigSize” id=”name_rg_display_section”>
<?php echo $firstName . ” ” . $lastName; ?>
</div></td></tr>
This is what a user will see. It just displays the name of the person.
<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>
We now create our editing table row. We create a div inside of it that is specifically the editing section. This div contains the input field as well as the two buttons. The php code in here first calculates how large the input box should be, then also puts the first and last name into the input box itself. The onClick code for the Save button does a few things. It first hides the input box and the two buttons. It then shows the words “Saving.” Next, it creates an AJAX call to updateProfileAjax.php. It sends two variables to that php script: part and val. Part tells the php which field we are editing. In this case, it is ‘name.’ Val is the updated value. Finally, we also have a cancel button, which just hides the editing row and shows the normal row.
<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>
We finish off the editing table row with the span tag which shows the words saving. We then run a tiny bit of javascript which hides the editing table row.
<?php }
else { ?>
<tr>
<td>
<div class=”superBigSize”><?php echo $firstName . ” ” . $lastName; ?></div>
</td></tr>
<?php } ?>
Last but not least, we need to show a non-editable version for those who don’t have editing rights.
We now have all the code for actually displaying the normal and editing states of a specific field, but what happens when someone actually saves with a new updated value? You will need to code a updateProfileAjax.php file. Here is an example of what one may look like. This file really depends on how your system works. You may want to update a text file or a database or any number of things. Just remember that it takes those two variables we mentioned. You must also do one last thing to this php file. You need it to return a little bit of text. Just have it echo the part variable at the very end. Something like:
<?php echo $_GET['part']; ?>
Should do just fine. Why do we need to do this? Because we need to handle the response (we skipped this javascript function above):
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’;
}
}
}
The handle response function is very simple. When http.readyState == 4, the AJAX request has finished. We next check whether the request returned the word name, email, or phone. Depending on what it returned, we run basically the same code but on a different html element. We generate the replace text by grabbing what the user typed into the input box. We then edit the innerHTML of the display section with either just that replace text or maybe any supplementary text like you see in the email and phone if-statements. Finally, we show the normal table row and hide the editing table row.
And with that, we now have a completely functional website with flickr-like editing abilities. This truly is the best way to allow editing on your website and will surely benefit your users. You can use all this code, alter/change whatever in any manner you see fit in both personal and commercial projects. You may include a comment referencing here, but that is not required. I hope this was a very informative tutorial and please leave any comments about the code or any suggestions/criticisms. If you liked this, you may also like my tutorial on how to do a cool css style effect like the OS X dashboard for your websites. Thanks for reading.
Featured Info
Nowadays, everyone is having their own web space yet there are many who are still unaware of its benefits e.g. you can sell something at your website, offer certain certifications courses e.g. a+ certification or you can indulge in affiliate business programs like offering mobile phone plans from verizon wireless. It is an easy step and many hosting companies provide this facility of having a web domain name that is associated with the space. These companies also provide featured web hosting services like dedicated servers, unlimited email aliases, ftp access, domain control, regular data backups and sql backup etc,123-reg is a good hosting company in this regard.
93 Replies
Paul Stamatiou on 1/8/2007 at 00:10Great article Dustin. I read something similar on 15 days (http://15daysofjquery.com/) a long time ago but this is more comprehensive. I am definitely planning on integrating such capability in my upcoming web app. I just skimmed through it as I have to get some sleep before classes startup tomorrow, but does it degrade gracefully if the user is running with JS disabled, ie, it won’t mess something else up? Seems like it does.
Dustin Bachrach on 1/8/2007 at 07:37I think right now, if javascript is disabled two things will happen.
1) You will not be able to do any editing, which is fine if javascript is disabled, but
2) The editing table row will be shown, which is a problem. To solve this, you can add a css attribute called notDisplayed with propertydisplay: none;
You can then make the editing table rows with this css class. That will make it so that it’s hidden without using any javascript.
I think that’s the only problem if javascript is disabled.
feedMashr on 4/13/2007 at 05:36What is the latest on how real / common a problem disabled stats are?
feedMashr on 4/13/2007 at 05:37What are the latest stats on how real / common a problem disabled javascript is?
Rory McCann on 4/13/2007 at 06:34You’re using GET when you should be using POST.
Dustin Bachrach on 4/13/2007 at 06:46feedMasr, I don’t have any stats on this, but in my opinion if your site is good enough you can demand Javascript on. I’m pretty sure uses are willing to turn javascript on for flickr and digg and all the sites that they feel are worthy. And if a user doesn’t have javascript enabled now, they are missing out on so much of the web, it’s hard to make code to fall back on. So much of web applications these days is javascript. Of course there’s a healthy ballance, but I think you should go ahead and just require javascript if you need it.
Rory, I’m not sure it’s a requirement to use POST. I think that’s more up to what code you already have in place to handle this sort of change. I don’t see any real difference between POST and GET that would affect this severly. Of course you want proper login checks in your php script so abusers can’t send in bad data through GET variables, but that should always occur.
Alex on 4/13/2007 at 07:19I like the idea - but how would you incorporate validations with this? For example, if you remove “@gmail.com” from the email address and it saves fine without it.
Incorporate ways to alert for improper data and this will be fantastic.
srb on 4/13/2007 at 07:20I browse with javascript disabled. I’ll only enable it if I think it is worth it. So the thing is you have to show my why I should. A message about the requirement to use javascript is also a good idea. Look into graceful degradation/ unobtrusive javascript. It is also a significant disability issue.
Dustin Bachrach on 4/13/2007 at 15:14Alex: Inside the input button for “Save”, could you put your validation in there and either call the ajax script or not based on the inputted value? You could also be double safe and do some validation in your PHP code too.
Rory McCann on 4/15/2007 at 12:20Dustin, By using POST you’re telling user agents that this operation canges things. See this: http://worsethanfailure.com/Articles/Best_of_2006_0×3a__The_Spider_of_Doom.aspx for an example of where not using POST can go terribly wrong.
Inside ones code, it shouldn’t be hard to change from GET to POST. One can use POST in ajax calls aswell.
Brett Molitor on 4/16/2007 at 08:29Dustin,
Awesome tutorial.
I’ve learned a ton just dissecting this a bit.
I do have an issue though, I’m wondering if you can help me with.
I’m kind of a newbie to the AJAX idea, so please forgive me if this is rudimentary.
I can make this idea work with my own custom php script but it doesn’t complete fully. It will hang on the “saving…” portion of the action. This happens even if I use your example “flickr_edit.php” code on my local server. If I refresh the page, it does update the database field correctly. What I’m wondering is, could there be an Apache setting I need to enable to allow this transaction to complete, or am I way off?If you have any ideas, for me, I’d appreciate it. If not, thanks again for the awesome tutorial.
Dustin Bachrach on 4/16/2007 at 14:59Brett, do you have this on your server so I can see it? Can I also see the source code. From the looks of it, it seems you most likely have a problem in your handleResponse method. If you can post that up or link to it, I will try and see what’s wrong.
Brett Molitor on 4/17/2007 at 07:44Unfortunately, it’s on an internal server in my network.
I emailed it to you…I could post here if you’d prefer.Thanks
John Sutherland on 4/20/2007 at 09:53You may also be interested in the following white-paper I wrote some time ago which does the same:
http://www.mercurytide.com/whitepapers/separating-structure-presentation-and-behaviour/
joostm on 4/20/2007 at 15:43Hi, Looks sweet! I am just a designer with some skills in programming and I am not the database kind-a-guy. How can I write to a text file? Should be awsome loading that textfile into flash or flex.. Can you give me a hint?
thanx,
links for 2007-04-20 « Sri’s Blog on 4/20/2007 at 17:19[...] Create flickr-like Editing Fields Using AJAX & CSS » Dustin Bachrach Blog (tags: ajax css javascript textfields forms) [...]
links for 2007-04-20 « toonz on 4/20/2007 at 17:27[...] Create flickr-like Editing Fields Using AJAX & CSS » Dustin Bachrach Blog (tags: ajax css flickr javascript) [...]
All in a days work… on 4/21/2007 at 05:27[...] Create flickr-like Editing Fields Using AJAX & CSS looks like he’s just a few careless errors away from a cool AJAX form! (tags: AJAX Forms) [...]
rascunho » Blog Archive » links for 2007-04-21 on 4/21/2007 at 14:17[...] Create flickr-like Editing Fields Using AJAX & CSS » Dustin Bachrach Blog 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. (tags: dbachrach.com 2007 desenvolvimento_web CSS ajax flickr blog_post) [...]
Links fundet p internettet den 2007-04-22 | Webmercial.dk on 4/22/2007 at 05:19[...] fundet p internettet den 2007-04-22 Linkomani — 22.04.07 kl 11:19 am Create flickr-like Editing Fields Using AJAX & CSS (tags: javascript css ajax) Mike Davidson: Pagination and Page-View Juicing [...]
Janos Horvath on 4/23/2007 at 15:19Any usability test with this method? How many user will recognize that you should go over the text and click to be able to edit the data?
Dustin Bachrach on 4/23/2007 at 15:43Janos: I’m not sure. Flickr uses this so I think we can assume a lot of people are familiar with this or can become familiar with it. It’s actually a very intuitive way to edit properties. We are just so used to do it in a different form and not onto the values themselves. I think with time this will become the de-facto standard.
Mike H on 4/26/2007 at 10:49Very nice, but what about accessibility? To a blind user, there is no form here.
Rob Lewis on 4/27/2007 at 02:15I have a similar problem to Brett above - the save does not appear to work - was this ever solved? Is it something to do with the way the server is returning the text?
Thanks for your time,
Rob.
Comedy Blog on 5/1/2007 at 14:05I’ll check it out. Thanks for the tutorial!
80+ AJAX-Solutions For Professional Coding | Smashing Magazine on 6/20/2007 at 07:17[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
85 Solucions AJAX on 6/20/2007 at 16:14[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
the designer’s pages » Blog Archive » 85 AJAX-Solutions For Professional Coding on 6/20/2007 at 23:46[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
XSiR.NET» Blog Arsiv » ücretsiz Ajax scriptleri on 6/22/2007 at 02:30[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
85 Adet Ajax Çalışmaları- « paylaşım (necil) on 6/24/2007 at 01:42[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
80+ AJAX-Solutions For Professional Coding | noisylime on 6/25/2007 at 08:32[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
80+ AJAX-Solutions For Professional Coding « idare’nin günlüğü on 6/26/2007 at 15:50[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
Steven on 6/30/2007 at 17:15“but in my opinion if your site is good enough you can demand Javascript on.”
Well, yes, you can demand that javascript is turned on, however, there is one very big problem with that..accessibility.
People who use screen readers and the such aren’t able to use javascript as there screen readers don’t understand it(as far as I know). Although that is a limitation of their software it can be classed as segregating the people with disabilities which ultimately could lead to law suits.
You should always try and program javascript with a ‘fallback feature’.
Just my two cents….
lost node » Blog Archive » 80+ AJAX-Solutions For Professional Coding on 7/3/2007 at 07:24[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
Flickr-like Editing Fields - Ajax Compilation on 7/6/2007 at 05:55[...] Website. [...]
oriolrius lifestream » Flickr-like Editing Fields on 7/6/2007 at 12:09[...] Website. [...]
Open Source Web Design » 80+ AJAX-Solutions For Professional Coding on 7/10/2007 at 02:33[...] AJAX & CSS Flickr-like Editing Fields 8. AJAX Instant [...]
80+ AJAX-Solutions For Professional Coding · unique butterfly on 7/18/2007 at 17:30[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
TeknoDergi.Org | PHP Programcılarına Ajax Çözümleri on 7/24/2007 at 07:41[...] AJAX & CSS Flickr-like Editing Fields [...]
80+ codigos AJAX profesionales « Quest’s Blog on 7/24/2007 at 11:24[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
sastgroup.com » Blog Archive » 85 scripts ajax professionali on 7/24/2007 at 12:43[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
Jordan on 8/6/2007 at 13:56To echo others, this is a cool technique and I’ve enjoyed the article (just came across this site).
I’m wondering, though, about the situations where this is useful. I typically write internal sites focusing on data collection. I can see users complaining if they have to hit save buttons for each field. I understand if there aren’t many fields that the user will update at a particular time, this technique is probably appropriate but is there a magic number of fields being updated where users will complain?
Dustin Bachrach on 8/12/2007 at 17:51I think if you are making users edit en masse, then you’re going to want to use standard forms, but if you are showing them a profile or some sort of content that is typically stagnant, but once and awhile they might want to change, this effect would be perfect.
Edit in place stile flickr : sastgroup.com on 8/21/2007 at 13:48[...] web: http://dbachrach.com/blo…-fields-using-ajax-css/ Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]
80 AJAX Örneği (Profesyonel) on 8/26/2007 at 07:27[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
Graham on 9/2/2007 at 12:00I’m having trouble getting the script working.
http://gramac4.freeserverhost.com/flickredit/ is where there is a live version. I’ve messed around with permissions but still no joy. Any suggestions?
G
Facebook Adopts “Edit In Place” » Dustin Bachrach Blog on 9/10/2007 at 12:15[...] some of you might know, I wrote a tutorial on how to do Edit-In-Place awhile ago. User Janos asked: Any usability test with this method? How many user will recognize [...]
Raji on 9/13/2007 at 13:37I just come across the site and saw. this is really a good article + code for AJAX learners.
Shawn on 9/13/2007 at 17:43I have the same problem as Brett and Rob. I keep hanging on the saving part. Like Brett I tried copying your code exactly how you have it in your example but on my server it does not work. The fields change to the edit mode like they should but when I hit save it freezes at saving and nothing changes.
EgyGuy » Blog Archive » 80+ AJAX-Solutions For Professional Coding on 9/17/2007 at 05:04[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
Piet Nirvana on 9/19/2007 at 10:57and oh i with my girl who i though was my worl. Piet Nirvana.
Richard on 9/22/2007 at 22:50Thanks for this! I am using it on our site, and it looks so much better now!
Obez Blog » 80+ AJAX-Solutions For Professional Coding on 9/24/2007 at 05:14[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
rob on 9/26/2007 at 15:51THIS IS A GREAT TUTORIAL FOR CODERS. NOT FOR THE AVERAGE BEGINNER.THERE IS NO EXPLANATION ON HOW YOU MAKE IT WORK ON A SERVER, SO BASICALLY ITS USLESS UNLESS SOMEONE FIGURES THAT PART OUT. :( JUST HANGS ON SAVING…
Kevin Stover on 10/8/2007 at 21:53Hey, Great tutorial. I got it to work with only one minor problem. I have the updateProfileAjax.php file updating some fields in my sql db. Unfortunately, it hangs up on the “saving…” text. When the page is refreshed, however, the value is changed. So, the script is changing the value in the database, but not returning to change it so that the user can see. Any ideas?
Kevin Stover on 10/8/2007 at 23:42Just thought I’d add to my last comment. I’ve been playing around with the script, and I’ve discovered that the problem seems to lie in the if…then statement within the function handleResponse(). When I remove the conditional statements, leaving the response to “name” intact, editing the name works perfectly, including saving to my database. My theory is that for some reason, the http.responseText isn’t able to be evaluated for some reason. When I tell it to document.write(http.responseText), I get the correct text (name, phone, email), but the page never really finishes loading.
Sorry for the long comment, but I hope that helps. I have no idea how to fix this problem and am kind of stuck until I do. If you think of anything, please send me an email and let me know. Thanks again.
Marc on 10/11/2007 at 05:48hi folks, great work!
Unfortunately the script just hangs on SAVING… but the database was updated.
Would be soooo glad about any suggestions how to fix this
hello on 10/20/2007 at 15:43Hey everyone, i havent tried it but it seems cool.
but one question? can it work with uploads? example have an upload option for the user could upload theyre picture.
and can it get a proof before it saves?i launching an online printing business and im looking for a design generator. lets say for a user could edit a business card online and somiting it when its ready to print. so would this work for that?
thanx.
85 AJAX scripts | AJAX | Web Design & Graphic Design Blog on 10/21/2007 at 01:19[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
Andreas Tennyson on 10/21/2007 at 13:31oh we didn’t care,we made it very clea. Andreas Tennyson.
Graham on 11/1/2007 at 12:09Thanks for that Kevin, I’ll mess around with the code and try it out. Why on earth does it work on this site then? I would have thought that if he has the if…then statement on this site, the same problem would arise? idk.
Whatever-ishere on 11/21/2007 at 10:06thanks for the GREAT post! Very useful…
行搏客 » Smashing Magazine:80多个Ajax解决方案（1） on 11/21/2007 at 21:07[...] 2、用Ajax和css制作的Flickr样式的即时编辑 [...]
Dedicated to Web » Blog Archive » O interaktivite, JS, Ajaxe + masívny prehľad! on 11/22/2007 at 20:22[...] http://dbachrach.com/blog/2007/01/07/create-flickr-like-editing-fields-using-ajax-css/ [...]
how to : about all for FREE » Blog Archive » Gratuit free ajax scripts on 12/4/2007 at 16:54[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
K4P » 80+ AJAX-Solutions For Professional Coding on 12/6/2007 at 23:06[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
jamienk on 12/8/2007 at 23:38A few thoughts:
* Shouldn’t the showAjaxUpdater.php file return the VALUE and then the JS use that to update the innerHTML? That way, if the escaped value is different from the entered value, the escaped value would be shown… You can imagine this if someone enters a script or an SQL injection attempt or something — it may get put into the db with the “bad” content stripped out, and you’d want to display that as the updated version, not just blindly dump the value they entered into the HTML (which might expose you to a XSS attack?)
* In order for the thing to work when someone has JS turned off: the default display for qualified-to-edit users should have the form with style=”display:block” and the text version with display:none; then the JS that gets run by default should hide the edit form and show the text version — that way the no-JS people will see the editable form. Then you want to make the form have an action=”showAjaxUpdater.php” with a hidden input name=nonajax value=y; in the showAjaxUpdater.php page, you want some logic that, if “y” == $_REQUEST[nonajax], the form data is entered into the db, and then the browser gets redirected back to the original PHP page with a msg=SAVED that gets displayed; the JS from the onClick of the Save button would have “return false;” in order to block the form actually being submitted.
* You could also show a styled “edit” link next to the editable parts to make the fact that it’s editable easier to see at a glance.
Just my 2 cents. Thanks you very much for your nice work! Much appreciated!
i say that | 80+ AJAX-Solutions For Professional Coding on 12/14/2007 at 09:12[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
Worpress » Blog Archive » AJAX Instant Edit on 12/27/2007 at 13:24[...] AJAX & CSS Flickr-like Editing Fields [...]
Webmaster 38 » Blog Archive » flickr-like Editing Fields at ajax scripts compound on 1/3/2008 at 19:44[...] flickr-like Editing Fields [...]
audg on 1/4/2008 at 10:05This is very cool, but can you add the “save to mysql database” part for a clueless ajax lover?
Thanks!
best AJAX Solutions For Professional web design - The Arts Lab TurkeY on 1/8/2008 at 15:58[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
NilDesign.ru » Blog Archive » 80 AJAX-Решений on 1/13/2008 at 12:17[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
80+ AJAX-Solutions For Professional Coding at egyptianwebdesigner.com on 1/20/2008 at 16:15[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
d on 1/30/2008 at 00:20fg
sdf on 2/3/2008 at 23:34zcvxcv
85 полезных и регулярно используемых AJAX-техник, необходимых для создания профессиональных веб-приложений » Как бесплатно создать сайт и on 2/4/2008 at 23:19[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
The Top 40 Free Ajax & Javascript Code for Web Designers | Speckyboy - Wordpress and Design on 2/10/2008 at 16:56[...] 12. Create Flickr Like Fields (http://dbachrach.com) [...]
Pearls » Create flickr-like Editing Fields Using AJAX & CSS on 2/11/2008 at 04:18[...] http://dbachrach.com/blog/2007/01/07/create-flickr-like-editing-fields-using-ajax-css/ [...]
刘执晨 on 2/17/2008 at 22:31good
Top 100 AJAX 'form' related scripts for 2007 | Nobox Media on 2/21/2008 at 01:08[...] flickr-like Editing Fields [...]
Dylan James on 2/26/2008 at 19:39Not sure if anyone fixed that bug, but it seemed the response text had a space after the string, eg.
the variable http.responseText was equal to ‘name ‘So if you just add a space at the end of the string in the if statements, it works:
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_saving_section’).style.display = ‘none’;
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 = “Email: ” + 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 = “Phone: ” + replaceText;
document.getElementById(’phone_rg’).style.display = ”;
document.getElementById(’phone_hv’).style.display = ‘none’;
}
}
}Great tutorial btw, thanks.
10 Edit In-Place Ajax Scripts | WebTecker the latest tech, web resources and news. on 3/6/2008 at 13:50[...] Flicker-Like edit in place - This script removes the use of outdated form interfaces. It will allow you to edit the date in place in real time. It is written with no framework just Ajax. Since its name is Flicker-like you can image that it is very similar to flicker. [...]
web master jobs on 3/7/2008 at 04:03AJAX & CSS Flickr-like Editing Fields […]
Web sayfalarınız için yerinde düzenleme (edit in place) | Göstergeç.net on 3/8/2008 at 19:01[...] Flicker-Like edit in place - Bu script ile modası geçmiş formlardan kurtulabilirsiniz. Gerçek zamanlı olarak verileri düzenleyebilirsiniz. Herhangi bir framework kullanılmadan sadece Ajax ile oluşturulmuş bir script. [...]
alican on 3/24/2008 at 12:57Teşekkürler :)
edit in place - CMS - Graphic Design Forum and Web Design Forum on 4/11/2008 at 12:06[...] "edit in place" type of css. Ive fiddled with both 24 ways: Edit-in-Place with Ajax and Create flickr-like Editing Fields Using AJAX & CSS Dustin Bachrach Blog both of which I have had no luck with. All im looking for is an extremely simple CMS system [...]
80+ AJAX-Solutions For Professional Coding « Gabriel Steinbach on 4/23/2008 at 08:30[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
Recursos y Tutoriales » Blog Archive » 85 soluciones AJAX on 5/6/2008 at 06:48[...] 7. AJAX & CSS Flickr-like Editing Fields [...]
Edit In-Place Ajax Scripts « Renganathan’s Weblog on 5/11/2008 at 04:49[...] Flicker-Like edit in place - This script removes the use of outdated form interfaces. It will allow you to edit the date in place in real time. It is written with no framework just Ajax. Since its name is Flicker-like you can image that it is very similar to flicker. [...]
jason on 5/12/2008 at 16:51nice code! tested and works a treat!
thanks.
Joey on 5/14/2008 at 11:41The reason that the function get stuck on saving is because http.responseText is not getting any feedback from the php file. Make sure that php file is echo $part; which should be the field name.
Alex on 5/15/2008 at 09:27That’s strange that it works for some people and not for others. I’m in the “Hangs on Saving …” boat, and have yet to find a solution even reading the comments above.
