jQuery Plugin For In-Place Editing of Data - jinplace

Jinplace is a jQuery plugin that is used to make sections of text on a page editable directly from the page.  Editing starts by clicking on the text. It then turns into an input field where the new text can be typed.  Clicking outside the field will submit the new new text and once a reply has been received, the input field is removed and the new text replaces it.

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.
• Supports text input fields.
• Supports textarea input fields.
• Supports select dropdown fields.
• Other kinds of input fields can be written as plugins
• 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.

See also:

• In-place Editing Javascript Library - X-editable

Basic Usage:

1. Include required javascript files on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jinplace.js"></script>

2. The html

Firstname: <span class="editable" data-url="/internal/person/firstname">John</span>

3. Call the plugin

  $('.editable').jinplace();

4. All the options can be passed via data-* attributes. The full list of options:

• data-type: The type of field. Defaults to 'input'
• data-url: The url to submit to. Defaults to same page
• data-data: Text or JSON data as initial editing text
• data-loadurl: The URL to load content for editing
• data-elementId: The ID of the element
• data-object: A name to pass back on submit
• data-attribute: Another name to pass back on submit
• data-okButton: Create a submit button with this name
• data-cancelButton: Create a cancel button with this name
• data-inputClass: A css class that is added to the input field
• data-activator: Object (or css selector) for object to activate editing. Defaults to the element itself.
• data-textOnly: When true (the default) text returned from server is displayed literally and not as html.
• data-placeholder: Text to display in empty elements.
• data-submitFunction: Function that is called to submit the new value.

Change Logs:

2017-02-27

• JS update

v1.2.1 (2015-05-27)

• update.

v1.1.0 (2014-11-24)

• update.

v1.0.0 (2013-12-06)

• bugs fixed.

v0.12.0 (2013-10-30)

• bugs fixed.

v1.0.0 rc2 (2013-09-13)

• bugs fix and features update

v0.11.1 (2013-08-12)

• bugs fix and features update

---

This awesome jQuery plugin is developed by itinken. For more Advanced Usages, please check the demo page or visit the official website.