Editable for Bootstrap In-place editing with Bootstrap Form and Popover

Example

Click on fields to edit:

Getting started

Include required js and css files:

jQuery & Bootstrap

<link href="path/to/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="path/to/jquery/jquery-1.8.2.min.js"></script>
<script src="path/to/bootstrap/js/bootstrap.min.js"></script>

Bootstrap-editable

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

Usage and markup

You can activate editable on your page easily with special markup and a few line of javascript. Options can be defined via either data-* attributes or json options.

Below you will find examples of each type and detailed list of all options.

Text

Just create <A> element

<a href="#" id="username">superuser</a>

and apply editable() method

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

Alternatively, you can set all the same options via data-* attributes

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

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

Textarea

Very similar to text, just set type to textarea

<a href="#" id="comments">awesome<br>user!</a>

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

Select

For select element additionally set data-source and data-value

<a href="#" id="group" data-type="select" data-name="group" data-pk="1" data-value="5" data-source="groups.php" data-original-title="Select group">Admin</a>

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

Date

Date is based on bootstrap-datepicker that is improved fork of eternicode's project. Use format and viewformat options to define how date will be stored and displayed

<a href="#" id="dob" data-format="dd.mm.yyyy">15.05.1984</a>

$('#dob').editable({
                           type:  'date',
                           pk:    1,
                           name:  'dob',
                           url:   'post.php',  
                           title: 'Select Date of birth'
                        });

Options

List of all possible options

function() {
    return $('#user_id').text();
}

<a href="#" id="group" data-type="select" data-value="1" data-source="{1: 'User', 2: 'Admin'}" ></a>

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

$('#comments').editable({
template: '<textarea rows="12"></textarea>'
});

validate: function(value) {
  if($.trim(value) == '') 
    return 'This field is required';
}

validate: {
    username: function(v) {...},
    fullname: function(v) {...}
}

function(data) {
    if(typeof data == 'object' && !data.success) return data.msg;  
}

function(xhr) {
    if(xhr.status == 500) return 'Internal server error';  
}

$.fn.editable.defaults.success = function(data) { ... }

Type specific options

There are additional options for different input types

Text & Textarea

Select

Date

Events

$('#username').on('init', function(e, editable) {
    alert('Initialized with value: ' + editable.value);
});

$('#username').on('update', function(e, editable) {
    alert('new value: ' + editable.value);
});

$('#action').on('render', function(e, editable) {
    var colors = {0: "gray", 1: "green", 2: "blue", 3: "red"};
    $(this).css("color", colors[editable.value]); 
});

Methods

$().editable(options)

Initializes an editable.

.editable('show')

Shows editable popover manually.

.editable('hide')

Hides editable popover manually.

.editable('option', nameOrObject, [value]) New

Set one or several options.

$('#username, #fullname').editable('option', 'pk', 123);

$('#username, #fullname').editable('option', {pk: 123});

Below methods are mainly for creating new records (details in next section)

.editable('validate')

Will call validate method for each editable in array. Returns object with names and validation messages, e.g.:

$('#username, #fullname').editable('validate');
/* possible result:
{
    username: "username is requied",
    fullname: "fullname should be minimum 3 letters length"
}
*/

.editable('getValue')

Returns current values for one or several editable elements. If value is null or undefined it will not be returned.

$('#username, #fullname').editable('validate');
/* possible result:
{
    username: "superuser",
    fullname: "John"
}
*/

.editable('markAsSaved')

Mark editable as saved to server (removes class "editable-changed" and updates lastSavedValue of editable).

$('#username, #fullname').editable('markAsSaved');

.editable('submit', config) New

This method is combination of validate, getValue and markAsSaved working together in more or less standart way. When applied it runs validation for matched editable elements and if no errors - submits data to provided url. It's configuration contains following options:

There are four possible scenarios:

• successful record creation
  Server response pattern must be: {id: <new-record-id>}. id will be automatically stored into pk value of all editables and they will start working in regular way. Will be called success() callback with response object in param.
• client-side validation error
  Will be called error() callback with errors object in param.
• server-side validation error
  Server response pattern must not be like: {id: <something>}. Good solution is response like {errors: <object with error messages>} to have silimar handling of server-side and client-side validation errors. Will be called error() callback with errors object in param.
• ajax error, http status != 200
  Will be called error() callback with xhr object in param.

Example code:

$('#username, #fullname').editable('submit', {
    url: 'new.php',              
    data: {custom: 'text'},     
    success: function(data) {
        /* actions on success */
    },
    error: function(data) {
        /* actions on validation error (or ajax error) */
        var msg = '';
        if(data.errors) {              //validation error
            $.each(data.errors, function(k, v) { msg += k+": "+v+"<br>"; });  
        } else if(data.responseText) {   //ajax error
            msg = data.responseText; 
        }
    }
});

Creating new record

Creating new record is a bit problem for editable interface because primary key (record id) is unknown and in-place-editing has no related object on backend. In that case editable will store new value inside and will not submit anything to server until you do it manually .This is default behavior when pk option is empty and send='auto'. To submit manually several editable fields there is submit api method. Try example below to see how it works.

Live example - creating new user:

Editables are initialized without pk option:

$('.myeditable').editable({
    url: 'post.php',
    /* pk not defined for new record */
    validate: {
        username: function(v) {if(v == '') return 'Required field!'}
    } 
});

When you update fields - no data are submited to server, but values are stored and editables marked with css class editable-changed.

When you click on save button, api method submit is called. It runs validation for all fields and if no errors - submits to server. If server response is like {id: <new-record-id>} it automatically stores id into pk value of all editables and they start working in regular way. Additionally success and error callbacks can be passed for customization (e.g. to show message).

$('#save-btn').click(function() {
    $('.myeditable').editable('submit', {   //call submit
        url: 'new.php',                     //url for creating new user
        success: function(data) {
            var msg = 'New user created! Now editables work in regular way.';
            $('#msg').addClass('alert-success').removeClass('alert-error')
                     .html(msg).show();
            $('#save-btn').hide(); 
        },
        error: function(data) {
            var msg = '';
            if(data.errors) {                //validation error
                $.each(data.errors, function(k, v) { msg += k+": "+v+"<br>"; });  
            } else if(data.responseText) {   //ajax error
                msg = data.responseText; 
            }
            $('#msg').removeClass('alert-success').addClass('alert-error')
                     .html(msg).show();
        }
    }); 
});

To have more advanced behavior when creating new record you can easily write your own handler using these api methods: validate, getValue and markAsSaved.
E.g.:

$('#save-btn').click(function() {
    var data,
        $elems = $('.myeditable'),
        errors = $elems.editable('validate'); //run validation for all values
    if($.isEmptyObject(errors)) {
        data = $elems.editable('getValue'); //get all values
        $.ajax({
            type: 'POST',
            url: 'new.php', 
            data: data, 
            dataType: 'json'
        }).success(function(response) {
            if(response && response.id) {
               $elems.editable('option', 'pk', response.id); //store pk
               $elems.editable('markAsSaved');  //on success mark fields as saved
               /* other success actions */
               ...
            } else {
               /* server-side validation error */
               ...
            }
        }).error(function() {
           /* ajax error */
           ...
        });
    } else {
        /* client-side validation error */
        ...
    }
});

If you find a bug or have an idea please feel free to create issue on github.