In-place Editing Javascript Library - X-editable

X-editable is a javascript library inspired by bootstrap-editable plugin that invokes in-place editing feature to any element of your page. It works with bootstrap, jquery-ui, jquery only and includes both popup and inline modes. 

XEditable Lite: The modern x-editable. Same API, no jQuery/Bootstrap. Searchable selects, AJAX ready. Download the upgrade.

Installation:

# NPM
$ npm install X-editable --save

# Bower
$ bower install X-editable --save

How to use it:

1.  Decide which core library you want to use.

2.  Inlcude X-editable.js and X-editable CSS

<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
<script src="bootstrap-editable/js/bootstrap-editable.js"></script>

3. Markup elements with additional data-* attributes

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-original-title="Enter username">superuser</a>

4. Call the function with options

//turn to inline mode
$.fn.editable.defaults.mode = 'inline'; // popup default

$('#username').editable({
    type: 'text',
    pk: 1, // primary key (record id)
    url: '/post', // Send ajax request with new value on /post
    title: 'Enter username'
});

Changelog:

2019-03-28

• Fixed: HTML5 inputs: the input element's type ('email') does not support selection (line 665)
• Fixed: select2 not working in Chrome 73
• Implement the activate() method so the editor will receive focus

2017-12-25

• v1.5.3

2017-01-24

• FIXED: maxYear

2017-01-15

• fix misspelling of useful

 

---

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