Basic tutorial for editable fields

Different types of editbale fields

If no type is defined as option, Editstrap will consider that the editable field should be a text with an input element that allow user change value of the field.

It is very important to tell Editstrap what type should appear to update editable field

For more information, please see type option

Examples
							$(function() {
								$("#toEdit").editstrap({
									type:'date'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									type:'select'
								});
							});	
                         
							$(function() {
								$("#toEdit").editstrap({
									type:'select2'
								});
							});	
                         

Customize your editable field

Change options to see the power of Editstrap. In this example, we will make an empty bold field as editable.

Editstrap will init value of the field with the given emptyText option. The example below will change the validate button style, the edit style and the title.

Examples
		                    		
									$(function() {
										$("#toEdit").editstrap({
											type:'text',
											title:'Change value',
											validateClass:'warning',
											editClasses:'fa fa-refresh',
											emptyField:'No data'
											
										});
									});	
		                         

Append and prepend text to your editable field

Editstrap allow you to add suffix and prefix to your editable field. The example shows how Editstrap work with append and prepend text

Don't forget to init value option to tell Editstrap what value to append to the editable field

Examples
									$(function() {
										$("#toEdit").editstrap({
											type:'text',
											prependText:'$ ',
											appendText:' /Unit',
											value:54
											
										});
									});	
		                         
$ 54 /Unit

Submit new value to the server side

Of course you want to send changes to a server side in order to save new value in a data base or something else. To do this, Editstrap will perform an Ajax call when you validate new value. Ajax request will be with POST

The ajax call will be done only if the URL option is set. You can add extra data to the ajax request by setting the data attribute in JSon form.

Examples
									$(function() {
										$("#toEdit").editstrap({
											type:'text',
											url:'https://httpbin.org/post',
											data:{language:'en'},
											name:'firstName'
											
										});
									});	
		                         
Jane

Your first complex type with Editstrap

Complex type in Editstrap allow you to mix diffrent simple type for one editable field.

If you want to display full name (first and last name) in your field but you want to change first and last name separately, Editstrap will do it for you easily

In the example above, the editable field will be split into 3 fields. You can indicate some elements like the type, init value or the width of the field

Examples
									$(function() {
										$("#toEdit").editstrap({
											type:'complex',
											complexEdit : [ {
												type : 'select',
												width:'20%',
												value : 1,
												dataSelect : [ {
													value : 1,
													text : "Mr"
												}, {
													value : 2,
													text : "Mrs"
												}, {
													value : 3,
													text : "Ms"
												} ],
												name : 'title'
											}, {
												type : 'text',
												value : 'Peter',
												width:'40%',
												name : 'firstName'
											}, {
												type : 'text',
												width:'40%',
												value : 'JENSON',
												name : 'lastName'
											} ]
											
										});
									});	
		                         
Peter JENSON