[DHTML] Extremely Easy In-place-editing

[BYK]

Hello again everyone :)


And I cannot think of another easy and unobtrusive way of implementing it but any idea is welcomed.

I have found a much more easier and an unobtrusive way! :D

I'll cut this short,

The demo is located at http://amplio-vita.net/JSLib/demos/quickEdit_3/final.htm
a quick tutorial can be found at http://code.google.com/p/av-jslib/wiki/aVquickEditTutorial

You can change anything in the demo as you can see. But they are not recorded and for the image change, whatever you send, it shows another image always which is again for security concerns of the public demo.

If you take a look at the source code, you can see the '<style type="text/quickEdit">' section which is used to define editable elements and their editability properties. As you can see it is a harmony of CSS selector syntax and the Javascript's JSON format.

Please have a look at the demo, if you have time download it with the JS files
and play around with it and PLEASE do comment on it :)

Thanks for your attention.

BTW, you can download all the files zipped from
http://amplio-vita.net/zip/JSLib/js for JS files and
http://amplio-vita.net/zip/JSLib/demos/quickEdit_3 for the demo.

Note: The '<style type="text/quickEdit">' system is not the only way. You may use an external file (http://amplio-vita.net/JSLib/demos/quickEdit_2) or you can use an inline syntax (http://amplio-vita.net/JSLib/demos/quickEdit).

[BYK]

By the way, any questions about the usage, or integration with site is welcomed as the comments ;)

[Nile]

Very neat script. Maybe you should set a cookie containing this data so next time I go there it has the same options.

[BYK]

It sends your data to the "change.php" but as I said, for the demo's security, I did not really set anything from the PHP file. But of course in a real application, they change and stay as you set :)

[Master_script_maker]

if you accidentally delete all of the text and loose focus, there is no way for the average user to edit it anymore.
Erase the name and loose focus.

[BYK]

Ow. Thank you very much for this. Never thought of it, will prevent sending empty text.

Thank you very much again. :)

Err, it is a problem with the span's I think. I mean, when you empty the "Additional Info" part, since it is a div which has a width&height although it is empty, you can edit it.

I'm looking for a CSS solution ;)

[Nile]

Also, if its empty it should restore to the text before it.

[BYK]

Alright, I checked again and again and realized that this is the inline elements' normal behavior.

Also after Nile's post I realized that posting empty variables is meaningless so I fixed it as Nile said.

Another thank you goes to Nile. :)

[Nile]

Like I said, I think that it should return to the previous text.