Advanced tutorial for editable fields

Customize success and error messages with Editstrap

This will help you customizing success and error messages. In this example we will display messages in a bootstrap modal

Example with success
Adding html for bootstrap modal
                    		
							
                    	
Adding javascript to apply editstrap
							$(function() {
								$("#toEdit").editstrap({
									displaySuccess:function(editable, value, text) {
										$("#modalSuccess").modal('show')
									},
									displayError:function(editable,errorMessage){
										$("#modalError").find(".modal-body >p").html(errorMessage);
										$("#modalError").modal('show')
									
							        },
							        validateValue:function(value){
							            if(value == undefined || value ==''){
							                return {success:false, message:'The field should not be empty'}
							            }
							            return {success:true, message:''}
							        }
								});
							});	
                         
Jane

Advanced example with complex type

In this example we will see how to prepend ot append html with complex type

Example
							$(function() {
								$("#toEdit").editstrap({
									type:'complex',
									complexEdit : [ {
										type : 'select',
										append:') ',
										prepend:' (',
										value : 2,
										dataSelect : [ {
											value : 1,
											text : "+1"
										}, {
											value : 2,
											text : "+33"
										}, {
											value : 3,
											text : "+34"
										}, {
											value : 3,
											text : "+32"
										} ]
									}, {
										type : 'text',
										value : '311223344',
									} ],
									
									prependText:''
								});
							});	
                         
(+33) 311223344

Validate new value

In this example we will see how use the function validateValue

Example
							$(function() {
								$("#toEdit").editstrap({
									type:'text',
									appendText:' Years',
									value:'44',
									validateValue:function(value){
							            if(value == undefined || value ==''){
							                return {success:false, message:'The input value should not be empty'}
							            }
							            else if(!$.isNumeric(value) || Math.floor(value) != value){
							            	return {success:false, message:'The input value should be a number'}
							            }
							            else if(value<=0){
							            	return {success:false, message:'The input value should be greater than 0'}
							            }
							            return {success:true, message:''}
							        }
								});
							});	
                         
44 years

Execute events after changing the value successfully

For this purpose, we can use afterChangeValue function. This function will be fired when the value is changed successfully

This example shows you how to update total price after a quantity or unit price changes.

Example
                    		
$ 50
4
$ 200
							$("#unit").editstrap({
								type:'text',
								prependText:'$ ',
								value:'50',
								afterChangeValue:function(editable,newValue){
							        var qty = $('#qtyId').editstrap('getValue');
									$('#total').text('$ '+(parseFloat(newValue)*parseFloat(qty)));
							    },
								validateValue:function(value){
							        if(value == undefined || value ==''){
							            return {success:false, message:'The input value should not be empty'}
							        }
							        else if(!$.isNumeric(value)){
							        	return {success:false, message:'The input value should be a numeric'}
							        }
							        else if(value<=0){
							        	return {success:false, message:'The input value should be greater than 0'}
							        }
							        return {success:true, message:''}
							    }
								
							});
							$("#qty").editstrap({
								
								type:'spinner',
								minValue:1,
								afterChangeValue:function(editable,newValue){
							        var unitPrice = $('#unitId').editstrap('getValue');
							        
									$('#total').text('$ '+(parseFloat(newValue)*parseFloat(unitPrice)));
							    },
								validateValue:function(value){
							        if(value == undefined || value ==''){
							            return {success:false, message:'The input value should not be empty'}
							        }
							        else if(!$.isNumeric(value)){
							        	return {success:false, message:'The input value should be a numeric'}
							        }
							        else if(value<=0){
							        	return {success:false, message:'The input value should be greater than 0'}
							        }
							        return {success:true, message:''}
							    }
								
							});
                         
$ 50
4
$ 200