-
Website
http://dbachrach.com -
Original page
http://dbachrach.com/blog/2007/01/07/create-flickr-like-editing-fields-using-ajax-css/ -
Subscribe
All Comments -
Community
-
-
Top Commenters
-
Popular Threads
All Comments
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 property
display: 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.
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.
Incorporate ways to alert for improper data and this will be fantastic.
Inside ones code, it shouldn't be hard to change from GET to POST. One can use POST in ajax calls aswell.
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.
I emailed it to you...I could post here if you'd prefer.
Thanks
http://www.mercurytide.com/whitepapers/separati...
thanx,
Thanks for your time,
Rob.
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....
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?
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
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.
Unfortunately the script just hangs on SAVING... but the database was updated.
Would be soooo glad about any suggestions how to fix this
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.
* 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!
Thanks!
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.
thanks.
this script dont save, stop in the saving, what fix?
Thanks!
Can anyone please tell me if all that ajax will work on windows server ?
Cheers - Matt.
I have successfully installed this on a Flickr test clone site, having changed Name for Title and Email for Notes (matching Flickr)
When the Notes field is clicked on, If there is a large amount of text, I get a very long input box (as one would expect with <input type="text"). I have tried changing this to 'textarea' but cannot to get it to work (my javascript is not brilliant).
Could you show me how to change the script to get it working as a textarea box like Flickr does?
Thanks
Bless You All participated in this production.