Edit-in-place on Bootstrap components

Hi, Habr!
In this article I will briefly talk about the Editable for Bootstrap library, which allows you to enter data on the page using the edit-in-place method and based on the Bootstrap components. I use it in the admin part of projects, or when I need to quickly make an interface with user input.
Details under the cut.


The data entry mechanism is based on the Bootstrap Form and Popover plugins. When you click on an item, a popover pops up, in which there is a control depending on the specified type. Now 4 types of controls are supported:

• Text
• Select
• Date
• Textarea

For Date, use the jQuery UI Datepicker, styled as a bootstrap .
The type of control and all other parameters can be specified both through data- * attributes, and as options when called.
For example, to make plain text editable and send data to post.php, you need:

<a href="#" id="firstname" data-type="text" data-pk="1" data-name="firstname" data-url="post.php">John</a> 

Javascript:

 $('#firstname').editable(); 

Or:

 <a href="#" id="firstname">John</a> 

 $('#firstname').editable({ url: 'post.php', type: 'text', pk: 1, name: 'firstname', title: 'Enter your firstname' }); 

When sending to the server, the request will contain the field name, the object identifier (primary key) and the new value:

 {name: 'firstname', pk: 1, value: 'John2'} 

This is enough to save a new value in the database.

A complete list of parameters and examples of working with other types are described in detail in the documentation. Also there is an example of creating a new record .

Any ideas / comments will be glad to hear in the comments or on github .
Thanks for attention!