Additional options for submit ajax request. List of values: http://api.jquery.com/jQuery.ajax

ajaxOptions: {
    type: 'put',
    dataType: 'json'
}

Animation speed (inline mode only)

Allows to automatically set element's text based on it's value. Can be auto|always|never. Useful for select and date. For example, if dropdown list is {1: 'a', 2: 'b'} and element's value set to 1, it's html will be automatically set to 'a'.
auto - text will be automatically set only if element is empty.
always|never - always(never) try to set element's text.

Value that will be displayed in input if original field value is empty (null|undefined|'').

Sets disabled state of editable

Callback to perform custom displaying of value in element's text.
If null, default input's display used.
If false, no displaying methods will be called, element's text will never change.
Runs under element's scope.
Parameters:

• value current value to be displayed
• response server response (if display called after ajax submit), since 1.4.0

For inputs with source (select, checklist) parameters are different:

• value current value to be displayed
• sourceData array of items for current input (e.g. dropdown items)
• response server response (if display called after ajax submit), since 1.4.0

To get currently selected items use $.fn.editableutils.itemsByValue(value, sourceData).

display: function(value, sourceData) {
   //display checklist as comma-separated values
   var html = [],
       checked = $.fn.editableutils.itemsByValue(value, sourceData);
       
   if(checked.length) {
       $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
       $(this).html(html.join(', '));
   } else {
       $(this).empty(); 
   }
}

Css class applied when editable text is empty.

Text shown when element is empty.

Error callback. Called when request failed (response status != 200).
Usefull when you want to parse error response and display a custom message. Must return string - the message to be displayed in the error block.

error: function(response, newValue) {
    if(response.status === 500) {
        return 'Service unavailable. Please try later.';
    } else {
        return response.responseText;
    }
}

Color used to highlight element after update. Implemented via CSS3 transition, works in modern browsers.

Mode of editable, can be popup or inline

Name of field. Will be submitted on server. Can be taken from id attribute

Action when user clicks outside the container. Can be cancel|submit|ignore.
Setting ignore allows to have several containers open.

Additional params for submit. If defined as object - it is appended to original ajax data (pk, name and value).
If defined as function - returned object overwrites original ajax data.

params: function(params) {
    //originally params contain pk, name and value
    params.a = 1;
    return params;
}

Primary key of editable object (e.g. record id in database). For composite keys use object, e.g. {id: 1, lang: 'en'}. Can be calculated dynamically via function.

Placement of container relative to element. Can be top|right|bottom|left. Not used for inline container.

Whether to save or cancel value when it was not changed but form was submitted

If selector is provided, editable will be delegated to the specified targets.
Usefull for dynamically generated DOM elements.
Please note, that delegated targets can't be initialized with emptytext and autotext options, as they actually become editable only after first click.
You should manually set class editable-click to these elements.
Also, if element originally empty you should add class editable-empty, set data-value="" and write emptytext into element:

<div id="user">
  <!-- empty -->
  <a href="#" data-name="username" data-type="text" class="editable-click editable-empty" data-value="" title="Username">Empty</a>
  <!-- non-empty -->
  <a href="#" data-name="group" data-type="select" data-source="/groups" data-value="1" class="editable-click" title="Group">Operator</a>
</div>     

<script>
$('#user').editable({
    selector: 'a',
    url: '/post',
    pk: 1
});
</script>

Strategy for sending data on server. Can be auto|always|never. When 'auto' data will be sent on server only if pk and url defined, otherwise new value will be stored locally.

Where to show buttons: left(true)|bottom|false
Form without buttons is auto-submitted.

Success callback. Called when value successfully sent on server and response status = 200.
Usefull to work with json response. For example, if your backend response can be {success: true} or {success: false, msg: "server error"} you can check it inside this callback.
If it returns string - means error occured and string is shown as error message.
If it returns object like {newValue: <something>} - it overwrites value, submitted by user.
Otherwise newValue simply rendered into element.

success: function(response, newValue) {
    if(!response.success) return response.msg;
}

How to toggle editable. Can be click|dblclick|mouseenter|manual.
When set to manual you should manually call show/hide methods of editable.
Note: if you call show or toggle inside click handler of some DOM element, you need to apply e.stopPropagation() because containers are being closed on any click on document.

$('#edit-button').click(function(e) {
    e.stopPropagation();
    $('#username').editable('toggle');
});

Type of input. Can be text|textarea|select|date|checklist and more

Css class applied when value was stored but not sent to server (pk is empty or send = 'never').
You may set it to null if you work with editables locally and submit them together.

Url for submit, e.g. '/post'
If function - it will be called instead of ajax. Function should return deferred object to run fail/done callbacks.

url: function(params) {
    var d = new $.Deferred();
    if(params.value === 'abc') {
        return d.reject('error message'); //returning error via deferred object
    } else {
        //async saving data in js model
        someModel.asyncSaveMethod({
           ..., 
           success: function(){
              d.resolve();
           }
        }); 
        return d.promise();
    }
}

Function for client-side validation. If returns string - means validation not passed and string showed as error. Since 1.5.1 you can modify submitted value by returning object from validate: {newValue: '...'} or {newValue: '...', msg: '...'}

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

Initial value of input. If not set, taken from element's text.
Note, that if element's text is empty - text is automatically generated from value and can be customized (see autotext option).
For example, to display currency sign:

<a id="price" data-type="text" data-value="100"></a>
<script>
$('#price').editable({
    ...
    display: function(value) {
      $(this).text(value + '$');
    } 
}) 
</script>

Whether to show clear button

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

CSS class automatically applied to input

Placeholder attribute of input. Shown when input is empty.

HTML template of input. Normally you should not change it.

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

CSS class automatically applied to input

Placeholder attribute of input. Shown when input is empty.

Number of rows in textarea

HTML template of input. Normally you should not change it.

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

CSS class automatically applied to input

Data automatically prepended to the beginning of dropdown list.

Source data for list.
If array - it should be in format: [{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]
For compability, object format is also supported: {"1": "text1", "2": "text2" ...} but it does not guarantee elements order.

If string - considered ajax url to load items. In that case results will be cached for fields with the same source and name. See also sourceCache option.

If function, it should return data in format above (since 1.4.0).

Since 1.4.1 key children supported to render OPTGROUP (for select input only).
[{text: "group1", children: [{value: 1, text: "text1"}, {value: 2, text: "text2"}]}, ...]

if true and source is string url - results will be cached for fields with the same source.
Usefull for editable column in grid to prevent extra requests.

Error message when list cannot be loaded (e.g. ajax error)

Additional ajax options to be used in $.ajax() when loading list from server. Useful to send extra parameters (data key) or change request method (type key).

HTML template of input. Normally you should not change it.

Text shown as clear date button. If false clear button will not be rendered.

Configuration of datepicker. Full list of options: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

Format used for sending value to server. Also applied when converting date from data-value attribute.
Possible tokens are: d, dd, m, mm, yy, yyyy

CSS class automatically applied to input

HTML template of input. Normally you should not change it.

Format used for displaying date. Also applied when converting date from element's text on init.
If not specified equals to format

Text shown as clear date button. If false clear button will not be rendered.

Configuration of datetimepicker. Full list of options: https://github.com/smalot/bootstrap-datetimepicker

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

Format used for sending value to server. Also applied when converting date from data-value attribute.
Possible tokens are: d, dd, m, mm, yy, yyyy, h, i

CSS class automatically applied to input

HTML template of input. Normally you should not change it.

Format used for displaying date. Also applied when converting date from element's text on init.
If not specified equals to format

Text shown as clear date button. If false clear button will not be rendered.

Configuration of datepicker. Full list of options: http://api.jqueryui.com/datepicker

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

Format used for sending value to server. Also applied when converting date from data-value attribute.
Full list of tokens: http://docs.jquery.com/UI/Datepicker/formatDate

CSS class automatically applied to input

HTML template of input. Normally you should not change it.

Format used for displaying date. Also applied when converting date from element's text on init.
If not specified equals to format

Configuration of combodate. Full list of options: http://vitalets.github.com/combodate/#docs

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

Format used for sending value to server. Also applied when converting date from data-value attribute.
See list of tokens in momentjs docs

CSS class automatically applied to input

Template used for displaying dropdowns.

HTML template of input. Normally you should not change it.

Format used for displaying date. Also applied when converting date from element's text on init.
If not specified equals to format.

Whether to show clear button

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

CSS class automatically applied to input

Placeholder attribute of input. Shown when input is empty.

HTML template of input. Normally you should not change it.

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

CSS class automatically applied to input

Data automatically prepended to the beginning of dropdown list.

Separator of values when reading from data-value attribute

Source data for list.
If array - it should be in format: [{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]
For compability, object format is also supported: {"1": "text1", "2": "text2" ...} but it does not guarantee elements order.

If string - considered ajax url to load items. In that case results will be cached for fields with the same source and name. See also sourceCache option.

If function, it should return data in format above (since 1.4.0).

Since 1.4.1 key children supported to render OPTGROUP (for select input only).
[{text: "group1", children: [{value: 1, text: "text1"}, {value: 2, text: "text2"}]}, ...]

if true and source is string url - results will be cached for fields with the same source.
Usefull for editable column in grid to prevent extra requests.

Error message when list cannot be loaded (e.g. ajax error)

Additional ajax options to be used in $.ajax() when loading list from server. Useful to send extra parameters (data key) or change request method (type key).

HTML template of input. Normally you should not change it.

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

CSS class automatically applied to input

Placeholder attribute of input. Shown when input is empty.

HTML template of input. Normally you should not change it.

Wysihtml5 default options.
See https://github.com/jhollingworth/bootstrap-wysihtml5#options

Whether to show clear button

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

CSS class automatically applied to input

Data automatically prepended to the beginning of dropdown list.

Source data for list.
If array - it should be in format: [{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]
For compability, object format is also supported: {"1": "text1", "2": "text2" ...} but it does not guarantee elements order.

If string - considered ajax url to load items. In that case results will be cached for fields with the same source and name. See also sourceCache option.

If function, it should return data in format above (since 1.4.0).

Since 1.4.1 key children supported to render OPTGROUP (for select input only).
[{text: "group1", children: [{value: 1, text: "text1"}, {value: 2, text: "text2"}]}, ...]

if true and source is string url - results will be cached for fields with the same source.
Usefull for editable column in grid to prevent extra requests.

Error message when list cannot be loaded (e.g. ajax error)

Additional ajax options to be used in $.ajax() when loading list from server. Useful to send extra parameters (data key) or change request method (type key).

HTML template of input. Normally you should not change it.

Configuration of typeahead. Full list of options.

Whether to show clear button

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

CSS class automatically applied to input

Placeholder attribute of input. Shown when input is empty.

HTML template of input. Normally you should not change it.

Configuration of typeahead itself. Full list of options.

If true - html will be escaped in content of element via $.text() method.
If false - html will not be escaped, $.html() used.
When you use own display function, this option obviosly has no effect.

CSS class automatically applied to input

Placeholder attribute of select

Configuration of select2. Full list of options.

Source data for select. It will be assigned to select2 data property and kept here just for convenience. Please note, that format is different from simple select input: use 'id' instead of 'value'. E.g. [{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...].

HTML template of input. Normally you should not change it.

Separator used to display tags.