<script src="dist/js/x-editable/bootstrap-editable.min.js" /> <script src="dist/js/x-editable/ace-editable.min.js" />
examples/profile-update.html.
examples/file-upload.php.
image parapmeter which takes custom file input options,
there is also on_error and on_success callbacks that are called
when an invalid file is selected or if files are successfully selected.
//first let's add a fake appendChild for Image element for browsers that have a problem with this
//because it seems that editable plugin calls appendChild, and it causes errors on IE at unpredicted points
try {
document.createElement('IMG').appendChild(document.createElement('B'));
} catch(e) {
Image.prototype.appendChild = function(el){}
}
$('#avatar').editable({
type: 'image',
name: 'avatar',
value: null,
image: {
name: 'avatar',//name should be here as well
//custom file input options
btn_choose: 'Change Avatar',
droppable: true,
maxSize: 110000,//~100kb
//inline editable callback option
on_error : function(error_type) {
//invalid file selected, for example display an error message
if(error_type == 1) {
//file format error
} else if(error_type == 2) {
//file size rror
}
else {
//other error
}
},
on_success : function() {
//valid file selected, for example remove error messages
}
},
url: function(params) {
//actual file upload happens here
//see "examples/profile-avatar-update.js"
}
});
$('#avatar').editable('show').on('hidden', function(e, reason) {
if(reason == 'onblur') {
$('#avatar').editable('show');
return;
}
$('#avatar').off('hidden');
})
$('#element').editable({
type : 'slider',
name : 'element-name',
//jQuery UI slider options
slider : {
min: 1,
max: 50,
//and slider's width (default is 200)
width: 100
//,nativeUI: true //this will use browser's built-in range control if available
},
success: function(response, newValue) {
alert(parseInt(newValue));
}
});
nativeUI option will switch to browser's built-in range control if available
$('#element').editable({
type: 'spinner',
name: 'element-name',
//spinner options
spinner : {
min: 16,
max: 99,
step: 1
//,nativeUI: true //this will use browser's built-in number input if available
}
});
nativeUI option will switch to browser's built-in number input if available
$('#element').editable({
mode: 'inline',
type: 'wysiwyg',
name: 'element-name',
//wysiwyg plugin options, such as buttons, etc
wysiwyg : {
//optional max-width
//css : {'max-width':'300px'}
},
success: function(response, newValue) {
}
});
adate
$('#element').editable({
type: 'adate',
//datepicker plugin options
date: {
format: 'dd/mm/yyyy',
viewformat: 'dd/mm/yyyy',
weekStart: 1
//,nativeUI: true //this will use browser's built-in date picker if available
}
})
nativeUI option will switch to browser's built-in date picker if available