= The jinplace jQuery plugin =

==Description==

This is a plugin for jQuery for in-place editing of data on the page.
The intended way to use it is for the editable fields on the web
page to be marked up with HTML data-* attributes.
The plugin call can be placed in a page template and when it runs
it finds all the fields that have been marked as editable.

Alternatively you can specify all options in the plugin call, or a
mixture of the two depending on your needs.

== About ==

* [https://bitbucket.org/itinken/jinplace/wiki/demo.html Live demo]
* [https://bitbucket.org/itinken/jinplace/downloads Downloads]
* [https://bitbucket.org/itinken/jinplace/src Source]
* [https://bitbucket.org/itinken/jinplace/wiki/Documentation Documentation]

== Features ==

* Primarily driven by markup on the page.
* Can also use javascript configuration.
* Framework independent.
* Works with IE6-8 and all modern browsers, including mobile.
* Directly supports text, textarea and select fields.
* Other kinds of input editors can be written as plugins
see [https://bitbucket.org/itinken/jinplace-extra jinplace-extra]
(or [https://github.com/itinken/jinplace-extra github mirror])

* Text like editing fields can optionally have OK and Cancel buttons
with configurable text.
* Data to be edited can be supplied as an attribute of the element,
rather than using the existing text within the element.
* Data to be edited can be retrieved from the server just before
editing.
* The object to be edited can be identified in a variety of ways.
* Any element can be used to activate the edit field, by default it
will be the element itself.

== Basic usage ==

You need to include the jQuery file and the jinplace file.

<pre code=html>
  <!-- Adjust depending on where you have located the files -->
  <script src="/js/jquery.js"></script>
  <script src="/js/jinplace.js"></script>
</pre>

Then mark up the elements that you wish to be editable using the
jinplace data-* attributes.  At minimum you need only add a suitable
class (or id) and the url to submit the data to.

<pre code=html>
  <span class="editable" data-url="/api/modify/987/name">Fred</span>
</pre>

Finally initialise the plugin selecting all the elements you want
to be editable. The following example selects all elements that have
class 'editable' and applies the plugin to them.

<syntaxhighlight lang="javascript">
 $('.editable').jinplace();
</syntaxhighlight>

For many more examples see the [https://bitbucket.org/itinken/jinplace/wiki/demo.html online demo]
and the [https://bitbucket.org/itinken/jinplace/wiki/Documentation documentation]

===See also===
Some similar jQuery plugins for in place editing.

* [http://www.appelsiini.net/projects/jeditable jeditable] Uses
javascript configuration only. Although you can use jinplace in this
manner, you may find that if you don't want to use markup
configuration then jeditable may be more suitable for you as it has
more configuration possibilities.

* [https://github.com/bernat/best_in_place best_in_place] Does
in-place editing using markup to indicate the editable areas.  It
is part of a ruby on rails project and is somewhat tied to it. Can
easily modify to work with any framework though.  If you are using
rails, then it may well suit your needs.
