All options

Type

Default: text

This allows you to specify the type of the editable field. All available types are presented in separate sections. Editstrap support many types of a form like simple input and select. Other bootstrap plugins are supported like datepicker

Possible values: text - date - select - select2 - multiselect - complex - tags
Examples
							$(function() {
								$("#toEdit").editstrap({
									type:'text'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									type:'date'
								});
							});	
                         
See example
See example

Title

Default: Click to edit

You can change the title that appear when the editable element is hover. You can disable the text by adding an empty text in this option.

Examples
							$(function() {
								$("#toEdit").editstrap({
									title:'Click to change'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									title:'Update value'
								});
							});	
                         
See Example
See Example

emptyText

Default: None

Editstrap cannot edit field if it is empty. So Editstrap init empty field with a default text. If you want to change empty text you can use this option

Examples
							$(function() {
								$("#toEdit").editstrap({
									emptytext:'Empty'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									emptyText:'No value'
								});
							});	
                         

language

Default: en

As Editstrap uses plugins like datepicker and select2, you can use this option to change language of these plugins. Don't forget to add i18n js of the plugin to your application

Examples
							$(function() {
								$("#toEdit").editstrap({
									language:'en',
									type:'date'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									language:'fr',
									type:'date'
								});
							});	
                         
See example
See example

dateFormat

Default: mm/dd/yyyy

You can change the format when displaying date. This option is used with the type date

Examples
							$(function() {
								$("#toEdit").editstrap({
									dateFormat:'dd-mm-yyyy',
									type:'date'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									dateFormat:'dd MM yyyy',
									type:'date'
								});
							});	
                         
01-09-2015
01 September 2015

validateClass

Default: default

This allows you to change the style of the validate button.

Examples
							$(function() {
								$("#toEdit").editstrap({
									validateClass:'success'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									validateClass:'danger'
								});
							});	
                         
See Example
See Example

appendText

Default: ''

You can append text to the new value before desplaying it. This text will appear like addons to the form

Examples
							$(function() {
								$("#toEdit").editstrap({
									appendText:' Kg'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									appendText:' °C'
								});
							});	
                         
54 Kg
14 °C

prependText

Default: ''

Like appendText, this option will pre append text to the new value before displaying it

Examples
							$(function() {
								$("#toEdit").editstrap({
									prependText:'$ '
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									prependText:'Mr '
								});
							});	
                         
$ 100
Mr Peter

multipleSeparator

Default: ' '

This option is for mutliselect type. You can define the separator between selected values

Examples
							$(function() {
								$("#toEdit").editstrap({
									multipleSeparator:' - '
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									multipleSeparator:' / '
								});
							});	
                         
English - French
English / French

value

Default: undefined

This is a very important option... If you need to initialize the form with a different value than the text of editable field, you can set this option with the wanted text. When you validate a new value, this option is changed automatically. For example, you can use this option to initialize selected value in a select type, or to initialize a text value...

Examples
							$(function() {
								$("#toEdit").editstrap({
									type : 'select',
									value : 1
									dataSelect : [ {
										value : 1,
										text : 'Mr'
									}, {
										value : 2,
										text : 'Mrs'
									}, {
										value : 3,
										text : 'Miss'
									} ]
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									type : 'multiple',
									value : [ 1, 2 ],
									dataSelect : [ {
										value : 1,
										text : 'English'
									}, {
										value : 2,
										text : 'French'
									}, {
										value : 3,
										text : 'Arabic'
									}, {
										value : 4,
										text : 'Spanich'
									}, {
										value : 5,
										text : 'Italian'
									} ]
								});
							});	
                         
Mr
English French

name

Default: undefined

This oprion will be sent also to the server side. It is very useful to find what field to update (Column in database for example).

If the option is undefined, Editstrap will initiate it with the name appribute of the editable field. If no name attribute, Editstrap will initiate the name with the id attribute.

Examples
							$(function() {
								$("#toEdit").editstrap({
									name : 'firstName'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									name : 'primaryName'
									
								});
							});	
                         

dataSelect

Default: []

You can define here elements to display in select or multiple type. Editstrap will use the value of this option to fill options in select. dataSelect can be an array of object {value:v, text:t} or a function that return an array of object

Examples
							$(function() {
								$("#toEdit").editstrap({
									
									dataSelect : [ {
										value : 1,
										text : 'Mr'
									}, {
										value : 2,
										text : 'Mrs'
									}, {
										value : 3,
										text : 'Miss'
									} ],
									type : 'select',
									value : 1
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									dataSelect : function(){
									return [ {
										value : 1,
										text : 'English'
									}, {
										value : 2,
										text : 'French'
									}, {
										value : 3,
										text : 'Arabic'
									}, {
										value : 4,
										text : 'Spanich'
									}, {
										value : 5,
										text : 'Italian'
									} ]
									},
									type : 'multiple',
									value : [ 1, 2 ]
									
								});
							});	
                         
Mr
English French

editClasses

Default: 'glyphicon glyphicon-pencil'

This option allows you to change the icon that appears when the editable field is hover

Examples
							$(function() {
								$("#toEdit").editstrap({
									editClasses:'glyphicon glyphicon-edit'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									editClasses:'fa fa-refresh'
								});
							});	
                         
See example
See example

validateValue

Default: function(value){}

This function allow to validate the new value before submission to the server. It should return an object {success:true|false, message:'...'}. If success attribute is true, Editstrap will allow submission otherwise, the message will be displayed as error

Examples
							$(function() {
								$("#toEdit").editstrap({
									validateValue:function(value){
										return {success:true, message:''}
									}
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									validateValue:function(value){
										if(value == undefined || value ==''){
											return {success:false, message:'Should not be empty'}
										}
										return {success:true, message:''}
									}
								});
							});	
                         
See example
See example

displaySuccess

Default: function(editable, value, text){}

Customise success message display. By default, success message will be displayed at the bottom of the editable field.

Examples
							$(function() {
								$("#toEdit").editstrap({
									 displaySuccess:function(editable,value,text){
									 	var element = editable.parent().parent().find(".result-message");
									 	element.removeClass('edit-has-success edit-has-error');
									   	element.html(this.successMessage);
									   	element.addClass(this.successClass); 
									   	element.show().delay(this.delayToHide).fadeOut();
									   
									}
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									displaySuccess:function(editable,value,text){
									 	alert('Success');
									}
								});
							});	
                         
See example
See example

displayError

Default: function(editable, errorMessage){}

Define how Edistrap should display message when error occured. By default, error message will be displayed at the bottom of the editable field.

Examples
							$(function() {
								$("#toEdit").editstrap({
									 displayError:function(editable,errorMessage){
									 	var element = editable.parent().parent().find(".result-message");
										element.removeClass(this.errorClass+' '+this.successClass);
										element.html(errorMessage);
										element.addClass(this.errorClass); 
										element.show();
									},
									validateValue:function(value){
										if(value == undefined || value ==''){
											return {success:false, message:'Should not be empty'}
										}
										return {success:true, message:''}
									}
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									displayError:function(editable,errorMessage){
									 	alert(errorMessage);
									},
									validateValue:function(value){
										if(value == undefined || value ==''){
											return {success:false, message:'Should not be empty'}
										}
										return {success:true, message:''}
									}
								});
							});	
                         
See example
See example

delayToHide

Default: 3000

Define the awaiting time before hiding the success message. By default, Editstrap hide the message after 3 seconds

Examples
							$(function() {
								$("#toEdit").editstrap({
									delayToHide:1000
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									delayToHide:10000
								});
							});	
                         
See example
See example

validateOnEnter

Default: true

Editstrap will validate new value when you type entre key (13). You can set this option to false to disable it.

Examples
							$(function() {
								$("#toEdit").editstrap({
									validateOnEnter:true
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									validateOnEnter:false
								});
							});	
                         
See example
See example

textAreaRows

Default: 10

This option is used on textArea type. Editstrap configure the number of rows in the text area using this option

Examples
							$(function() {
								$("#toEdit").editstrap({
									type:'textArea',
									textAreaRows:3
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									type:'textArea',
									textAreaRows:15
								});
							});	
                         
See example
See example

complexEdit

Default: undefined

This option is used only on complex type. It allows you to define elements that compose the complex editable field.

Examples
							$(function() {
								$("#toEdit").editstrap({
									type : 'complex',
									complexEdit : [ {
										type : 'select',
										value : 2,
										append:' ',
										dataSelect : [ {
											value : 1,
											text : "Mr"
										}, {
											value : 2,
											text : "Mrs"
										}, {
											value : 3,
											text : "Ms"
										} ],
										name : 'title'
									}, {
										type : 'text',
										value : 'Julia',
										name : 'firestName',
										append:' '
									}, {
										type : 'text',
										value : 'Flor',
										name : 'lastName'
									} ]
								});
							});	
                         
Mrs Julia Flor

url

Default: undefined

The URL to call with Ajax to submit new value to server side

Examples
							$(function() {
								$("#toEdit").editstrap({
									url : 'http://url/to/call'
								});
							});	
                         

data

Default: {}

Fill this option if you want to send additional data to the server

Examples
							$(function() {
								$("#toEdit").editstrap({
									data : {field:value}
								});
							});	
                         

pk

Default: undefined

Use this option to define a primary key when sending a request to the server. This option will be added to the data option to easily find record to update on the server side

You can set this value using the attribute date-edit-pk in the editable element. If the pk still undefined, no value will be sent to the server side.

Examples
							$(function() {
								$("#toEdit").editstrap({
									pk : 50
								});
							});	
                         

placeholder

Default: ''

This option is used to specify a placeholder for input text and text area elements.

Examples
							$(function() {
								$("#toEdit").editstrap({
									type:'textArea',
									placeholder:'Please give description'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									type:'text',
									placeholder:'First name'
								});
							});	
                         
None
None

hoverClass

Default: undefined

This allows you to change appearance when hover an editable field.

Examples
                    		.custom-bold-hover{
                    			font-weight: bold;
                    		}
                         
                    		
							$(function() {
								$("#toEdit").editstrap({
									hoverClass:'custom-bold-hover'
								});
							});	
                         
                    		.custom-red-hover{
                    			color: red;
                    		}
                         
							$(function() {
								$("#toEdit").editstrap({
									hoverClass:'custom-red-hover'
								});
							});	
                         
Hover bold
Hover red

afterChangeValue

Default: undefined

A function that will be executed after a value changed successfully.

Examples
                    		
							$(function() {
								$("#toEdit").editstrap({
									afterChangeValue:function(editable,newValue){
										alert('Hey! I am executed after a value changed');
									}
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									afterChangeValue:function(editable,newValue){
										alert('Hey! This is the new value '+newValue);
									}
								});
							});	
                         
Jane
Jane

appendClass

Default: undefined

You can use this option to add classes to change the append text display.

Examples
                    		
							$(function() {
								$("#toEdit").editstrap({
									value:18,
									appendText:' Kg',
									appendClass:''
								});
							});	
                         
                    		.append-example{
								color: #fff;
								background-color: #a94442;
								border-color: #a94442;
							}
                         
							$(function() {
								$("#toEdit").editstrap({
									value:18,
									appendText:' Kg',
									appendClass:'append-example'
								});
							});	
                         
18 Kg
18 Kg

prependClass

Default: undefined

You can use this option to add classes to change the prepend text display.

Examples
                    		
							$(function() {
								$("#toEdit").editstrap({
									value:1000,
									prependText:'$ ',
									prependClass:''
								});
							});	
                         
                    		.append-example{
								color: #fff;
								background-color: #a94442;
								border-color: #a94442;
							}
                         
							$(function() {
								$("#toEdit").editstrap({
									value:1000,
									prependText:'$ ',
									prependClass:'append-example'
								});
							});	
                         
$ 1000
$ 1000

onUpdateError

Default: function
					function (editable,jqXHR, textStatus, errorThrown) {
					 	this.displayError(editable, 'Error on submit : '+jqXHR.status+' '+errorThrown);
				 	}
						
                

This function allows you to cutomise error display when an Ajax request is failed.

Examples
							$(function() {
								$("#toEdit").editstrap({
									url:'https://httpbin.org/get',
									onUpdateError:function (editable,jqXHR, textStatus, errorThrown) {
									 	this.displayError(editable, 'Error on submit : '+jqXHR.status+' '+errorThrown);
								 	}
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									url:'https://httpbin.org/get',
									onUpdateError:function (editable,jqXHR, textStatus, errorThrown) {
									 	alert('Error on submit : '+jqXHR.status+' '+errorThrown);
								 	}
								});
							});	
                         
Try me
Try me

beforeSendUpdate

Default: undefined

This function allows you to do some actions before sending an ajax request. It is very useful if you need to complete something before sending changes to the server side

This function take the editable element and data to send as arguments

Examples
							$(function() {
								$("#toEdit").editstrap({
									url:'https://httpbin.org/post',
									beforeSendUpdate:function (editable,dataToSend) {
									 	dataToSend.value=dataToSend.value+' something';
								 	}
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									url:'https://httpbin.org/post',
									beforeSendUpdate:function (editable,dataToSend) {
									 	dataToSend.role='admin';
								 	}
								});
							});	
                         
Try me
Try me

minValue

Default: undefined

This value is used for spinner type to define min value.

Examples
							$(function() {
								$("#toEdit").editstrap({
									type:'spinner',
									minValue:1,
									value:5
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									type:'spinner',
									minValue:18,
									value:18
								});
							});	
                         
5
18

maxValue

Default: undefined

This value is used for spinner type to define max value.

Examples
							$(function() {
								$("#toEdit").editstrap({
									type:'spinner',
									maxValue:10,
									value:5
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									type:'spinner',
									maxValue:18,
									value:18
								});
							});	
                         
5
18

excludeClasses

Default: []

You can use this option to add classes to be excluded from clicking outside editable element. i.e when clicking on elements having these classes, the editable field will still open.

Examples
							$(function() {
								$("#toEdit").editstrap({
									excludeClasses:'.some-classes'
								});
							});	
                         

typeahead

Default: undefined

This value is used for typeahead type to define options of the typeahead plugin.

Examples
                    	var substringMatcher = function(strs) {
						  return function findMatches(q, cb) {
						    var matches, substringRegex;
							// an array that will be populated with substring matches
						    matches = [];
					
						    // regex used to determine if a string contains the substring `q`
						    substrRegex = new RegExp(q, 'i');
							// iterate through the pool of strings and for any string that
						    // contains the substring `q`, add it to the `matches` array
						    $.each(strs, function(i, str) {
						      if (substrRegex.test(str)) {
						        matches.push(str);
						      }
						    });
					
						    cb(matches);
						  };
						};
					
						
							var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
							        	  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
							        	  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
							        	  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
							        	  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
							        	  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
							        	  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
							        	  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
							        	  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
							        	];
							$(function() {
								$("#toEdit").editstrap({
									type:'typeahead',
									typeahead:{
										options:{
										  hint: true,
										  highlight: true,
										  minLength: 1
										},
										dataset:{
										  name: 'states',
										  source: substringMatcher(states)
										}
									}	
								});
							});	
                         
New York

openNext

Default: undefined

You can use this option to open automatically next editable field after a successful update.

Examples
							$(function() {
								$("#toEdit").editstrap({
									openNext:true,
									url:'https://httpbin.org/post'
								});
							});	
							$(function() {
								$("#toEdit2").editstrap({
									openNext:true,
									url:'https://httpbin.org/post'
								});
							});	
							$(function() {
								$("#toEdit3").editstrap({
									openNext:true,
									url:'https://httpbin.org/post'
								});
							});	
                         
Editstrap
Street 2015
1234567

saveOptions

Default: inline

This value is used to define how to display validate/cancel buttons.

Examples
							$(function() {
								$("#toEdit").editstrap({
									value:'Save option',
									saveOptions:'block'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									value:'Save option success',
									validateClass:'success',
									saveOptions:'block'
								});
							});	
                         
Save option
Save option success

dataType

Default: JSON

This value is used to define ajax dataType option.

Examples
							$(function() {
								$("#toEdit").editstrap({
									value:'data type',
									dataType:'JSON'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									value:'data type',
									dataType:'script'
								});
							});