Any ideas on how to make edit-in-place degradable?

Question

I'm currently writing an edit-in-place script for MooTools and I'm a little stumped as to how I can make it degrade gracefully without JavaScript while still having some functionality. I would like to use progressive enhancement in some way. I'm not looking for code, but more a concept as to how one would approach the situation. If you have any ideas or know of any edit-in-place scripts that degrade gracefully, please share.

Answer 1

You can't do edit-in-place at all without JavaScript, so graceful degradation for it consists of making sure that the user can still edit the item in question when JavaScript isn't available.

As such, I'd just have a link to edit the entire item in question and then create the edit-in-place controls in JavaScript on page load, hiding the edit link if you'd rather than users use edit-in-place when available.

Answer 2

If it's textual content, you could show the editable content as an input type submit button, with as caption the content. When clicked, it would submit the entire form, preserving the other values, and show an edit dialog. Afterwards the form values could be restored.

Answer 3

Maybe put an input in a div under each element that has an edit-in-place. When the page loads, use javascript to hide those divs. That way they'll only be usable if the javascript never fires.

Answer 4

It sounds like you might be approaching this from the wrong direction. Rather than creating the edit-in-place and getting it degrade nicely (the Graceful Degradation angle), you should really be creating a non-Javascript version for editing and then adding the edit-in-place using Javascript after page load, reffered to as Progressive Enhancement.

There are two options for this. Create the display as a form with a submit button that works without Javascript, then using Javascript replace the inputs with some kind of label that performs the edit-in-place. You should be able to use a combination of labels and id attributes to pick out the correct properties for your edit-in-place implementation to work. The other option if you don't want a form to display by default is to display the values with an button/link for turning it into a form using server-side processing, then adding the edit-in-palce to that.

Answer 5

I'm asuming what you're trying to do is something like the following scenario:

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

Where the <a> is a button that replaces the <span> with an <input>, so that it can be edited. There are a couple of ways to make this degrade gracefully (ie work without javascript).

In theory:

Using CSS, do it with psuedo-selectors. :active is somewhat like an onclick event, so if you nest a hidden <input> in the <li>, this CSS hides the <span> and shows the <input> when the li is clicked on.

li:active #editable {
    display:none;
}
li:active input{
    display:block;
}

This may work in your favorite browser, but you'll without doubt find that it breaks in IE.

In practice:

Use a link. Have that <a> be an actual link that goes to a page where this input/span substitution has been done server side. You stick an event handler on the <a> that uses MooTools to cancel the click event for people who have JS, like this:

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

Answer 6

Try using a styled input text, and after the page loaded make it readonly, using the readonly attribute. and when click on it remove the readonly attribute, and onblur making it readonly again. when clicking on "Save" button or on onblur event make an Ajax Request to save the data in the server.