

X-editable: In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery - sohamsankaran
http://vitalets.github.com/x-editable/

======
masklinn
I find it sad (to annoying) that these projects _still_ use actual form
elements instead of `contenteditable`, even though they're quite obviously
full-JS (and probably not going to be submitted through HTML forms), given the
difficulty of correctly styling, integrating and interacting with form
elements.

The web is in dire need of a library correctly reimplementing "form behaviors"
(events, mostly) on top of contenteditable, and allowing those behaviors to be
applied to arbitrary (to the extent that browser implementations allow)
elements on the fly.

edit: just in case, don't take me wrong, HTML forms should stay and I'm an
advocate of less javascript everywhere as it tends to be mandated in places
where it has no reason to be (and to ultimately decrease usability rather than
enhance it), but if you're going to do "edit in place" and rich web
applications which require javascript to run — and using the library linked
above would probably qualify as you can't do anything without JS enabled and a
fairly recent browser running it. And in those cases, HTML form elements tend
to be a hindrance more than a help.

~~~
laktek
Have you seen Aloha Editor(<http://aloha-editor.org>)? Its behavior is built
on `contenteditable`.

~~~
masklinn
Aloha is an RTE, I'm not talking about RTEs in my comment I'm talking about
bare, basic fields. Such as the one I'm typing/editing this comment in.

~~~
laktek
Aloha is not a traditional WYISWYG editor contained in a textarea. You can
apply it to any HTML element in a page, which would turn them in to editables
(check this example of math editing - <http://wysiwhat.github.com/Aloha-
Editor/cnx.html>)

~~~
scribu
Doesn't work in Firefox.

OT: Am I the only one annoyed by this "viewed best in Chrome" trend? Reminds
me of those old "Best in IE" badges.

~~~
fredsted
Works fine in Firefox 17, try updating your browser.

~~~
scribu
I was running Firefox 16.0.2. I updated to Firefox 17 and it still doesn't
work; I can't edit or change anything.

------
rbcb
It took me a minute to figure out how to edit the field.

You're creating new behavior which is counter to how we all understand links.
Underlined words take us to other places. And dashed words unfortunately have
the stigma of opening up some crappy add referencing the word.

Consider instead a little edit carrot next to the word and clicking anywhere
in the cell makes it editable.

~~~
dfguo
Agree on this. Took me some time to figure out clicking on the link-like text
enables the editing mode.

------
rhplus
I don't really understand why this interaction model is a good thing. The
inline and popup versions require me to confirm _every single action_. It's
forcing me to perform two actions (select, confirm) when a regular form uses
just one (select).

~~~
crucialfelix
I use it for cases where the public display page can have some displayed
fields that an admin can — if they notice a little typo or something to change
- quickly click and fix it.

But not for doing editing where you need to change many or most of the fields.

------
elchief
The only improvement I would suggest would be to change the height of the form
element so that it does not alter the height of the row (shifting later
elements downward). Nice job.

------
nateweiss
Useful, thank you for posting. Obviously, this isn't a user interaction that
you want to use everywhere, but there are plenty of situations where editing
individual fields via mini-modals like this will make lots of sense.

For one thing, I can see where having this in the toolbox might enable one to
bang out a fast admin-type view quickly--and sometimes being able to implement
some relatively "utilitarian" view quickly is what lets you spend the proper
amount of time on views that you want to implement more traditionally/fancily.

The use of "links" to launch the little dialogs doesn't personally bother me
for whatever reason. (Though I get that sometimes it's just preference--for
instance I have always disliked the use of drop-downs as navigation controls,
but re-purposing the link element as shown in these x-editable demos doesn't--
not sure I can defend why).

------
revetkn
I can't find any info on browser support (maybe I'm looking in the wrong
place). Anyone know?

------
sarbogast
Awesome stuff! Now the next step is to integrate that with AngularJS and it
will be perfect for my current project :P

------
zerovox
I would definitely use this if it had Foundation tooltip support. How easy
would it be to adapt this for other tooltip systems?

<http://foundation.zurb.com/docs/elements.php>

~~~
Benferhat
Foundation support would be great. What else do you currently use with
foundation?

~~~
zerovox
I have one project with Foundation at the moment, I like it quite a lot. I
think it has a nice clean look and isn't as ubiquitous as Bootstrap. I don't
use anything else with it at the moment, but this is something I wanted to do
for it anyway, so I will definitely be using it!

------
asher_
This is quite neat, thanks a lot!

------
cocoflunchy
This doesn't work for me: <http://vitalets.github.com/x-editable/demo.html>
(Chrome 23.0.1271.64 m) whereas Editable works just fine. Am I the only one?

~~~
danek
i'm on the same version of chrome (win7) and it works for me

~~~
cocoflunchy
II see where this comes from: jQuery fails to load and they're not using
$(document).ready().

It happens on my school's network, jquery.com is painfully slow...

------
dotmanish
This is a lazy comment. Is it possible to include both popup and inline JS of
this at once? (the demos are mutually exclusive)

------
ppadron
This is really good. A great addition would be Aviary support for images. If I
come up with something good I'll send a PR.

------
bookcasey
Doesn't work with tab.

------
BaconJuice
This is very cool, thanks for sharing.

------
chmike
Doesn't work on ipad

------
TommyDANGerous
I like a lot.

------
marcamillion
Love this...can't wait for a Rubygem.

~~~
IceyEC
You can just include this in your views...no need to wait for a gem.

------
TommyDANGerous
This is fun, HTML5 is so powerful.

~~~
pacomerh
You're confused, the main technology here is not html5, it's a combination of
javascript and css.

