Building a neat edit in place behavior

re: Building a neat edit in place behavior

Bertrand Le Roy — Wed, 03 Dec 2008 17:37:33 GMT

@Pete: Sure, if you read the follow-up to this post, you'll see a simplified version of this component and a discussion why the focus pseudo-class is not quite usable yet.

weblogs.asp.net/.../simplifying-the-edit-in-place-behavior.aspx

re: Building a neat edit in place behavior

Pete Hurst — Wed, 03 Dec 2008 15:14:51 GMT

Sounds like this effect (especially Nikhil's version) could be acheived with two simple CSS rules:

input {

border:none;

}

input:focus {

border:....

}

Good to see a solid example of an AJAX behaviour, however make sure you're not encouraging "using a sledgehammer to crack a nut" stories!

re: Building a neat edit in place behavior

Bertrand Le Roy — Mon, 24 Nov 2008 18:06:10 GMT

@Rick: sure, there's a lot more you can do, and that wasn't the point of this exercise. I just built this because I needed something simple to use in samples. As I was building it, I realized it would also be a nice example of how to build components for Microsoft Ajax. If you're in the market for a professional edit in place control, this is not it. :)

re: Building a neat edit in place behavior

Rick Strahl — Mon, 24 Nov 2008 09:55:56 GMT

Bertrand - Cool, but maybe a little simplistic. This approach falls flat when you have any sort of formatting (including spaces) in your HTML. Won't work if you have formatted text (like bold/italics) etc. if you're using a textbox for display.

I've built something like this some time ago for jQuery with any content converting to a textbox/textarea and it gets out of control pretty quickly to handle carriage returns, links etc. properly.

Have you given any thought to just using the DomElement.contentEditable instead of a textbox?

$("#editableControl).get(0).contentEditable = true;

That would make it much easier to in place editing and completely side step the issues of converting to and from plain text first and capture the essence of the html displayed.

You should be able to make any content editable this way and it looks like all major recent browsers now support this functionality (IE, FF, Opera, WebKit)

That may have issues of its own though - if you're only interested in plain text.

re: Building a neat edit in place behavior

PLJdn — Fri, 21 Nov 2008 19:35:39 GMT

The link for the source is stange. When i try to download the source in Opera i get a 404. If i use IE it is fine.

re: Building a neat edit in place behavior

Tiamat — Fri, 21 Nov 2008 19:31:43 GMT

Great example! it would be nice to see this edit in place along with other behaviors as you said the autocomplete and the watermark

re: Building a neat edit in place behavior

bdukes — Fri, 21 Nov 2008 18:33:54 GMT

hmmm... tried it a couple of times this morning, just tried it again and it works fine. Definitely weird. Thanks for the tutorial/code!

re: Building a neat edit in place behavior

Bertrand Le Roy — Fri, 21 Nov 2008 18:27:24 GMT

That is weird. I tried the link yesterday and just tried it again, it downloads fine. Maybe something to do with your proxy or firewall?

re: Building a neat edit in place behavior

bdukes — Fri, 21 Nov 2008 18:22:44 GMT

Your source code link is giving me a 404 error...