The first version of jQuery Edit In Place (JEIP) is ready. The UI and features basically the same as my older Prototype based edit in place code, with a few extra tidbits thrown in for good measure.
It works in the typical jQuery style, as a plugin off of the main jQuery object. Here’s a simple example that makes all elements with a class of ‘edit-this’ editable and sends the form data to ‘save.php’:
[sourcecode language=”javascript”]
$( “.edit-this” ).eip( “save.php” );
[/sourcecode]
Check out the JEIP page for a details on what data the XHR includes and what the expected response needs to be. There’s also a long list of options that the eip function supports.
You can dive in by taking a look at this basic demo and then downloading version 0.1.0 of jeip.js.
8 replies on “Introducing jQuery Edit In Place (JEIP)”
[…] Scott lansează prima versiune de jQuery Edit in Place (JEIP). Nu e chiar la început, fiind o portare de pe Prototype, și se miscă foarte […]
the demo has a bug. if you double click the text to be edit, it will show you two textarea.
Thanks for pointing this out. The click event for editing wasn’t being turned off after it was clicked the first time. I’ve fixed this in version 0.1.2 of jeip.js.
Awesome, I’ve been looking for exactly this for some time now! I am a big fan of edit-in-place interfaces, I think they are the way forward for making Web sites easy to administrate as it avoids the user having to learn a completely different interface UI for administration.
I just happened to stumble across your blog from reading your old blog post describing how to do recursive search-and-replace in a Perl one-liner.
How can I send an id to the php file? Is it possible to use the id of the dom object?
The DOM id of the element is submitted in the save XHR. Check out the ‘The Save XHR and Response’ section on the http://josephscott.org/code/javascript/jquery-edit-in-place/ page
Dont know whether it is a bug, but after submit the save text hangs.
http://www.sionvalais.com/livecam/Morgins/128924
function on save
http://www.sionvalais.com/php/edit.php
Look at the XHR in Firebug, the “html” field in the JSON string is returning an empty string. That wouldn’t prevent the “Saving…” text from being removed though. Have you tried this on an empty page? Perhaps there’s something else on the page that’s causing the problem.
If you can pin down what’s going on please contact me (http://josephscott.org/contact/). I’m happy to fix bugs in the code.