autosubmit method
This commit is contained in:
src
@ -11,7 +11,7 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
|||||||
|
|
||||||
var EditableForm = function (element, options) {
|
var EditableForm = function (element, options) {
|
||||||
this.options = $.extend({}, $.fn.editableform.defaults, options);
|
this.options = $.extend({}, $.fn.editableform.defaults, options);
|
||||||
this.$element = $(element); //div, containing form. Not form tag!
|
this.$element = $(element); //div, containing form. Not form tag! Not editable-element.
|
||||||
this.initInput();
|
this.initInput();
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -69,6 +69,11 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
|||||||
//input
|
//input
|
||||||
this.$form.find('div.editable-input').append(this.input.$input);
|
this.$form.find('div.editable-input').append(this.input.$input);
|
||||||
|
|
||||||
|
//automatically submit inputs when no buttons shown
|
||||||
|
if(!this.options.showbuttons) {
|
||||||
|
this.input.autosubmit();
|
||||||
|
}
|
||||||
|
|
||||||
//"clear" link
|
//"clear" link
|
||||||
if(this.input.$clear) {
|
if(this.input.$clear) {
|
||||||
this.$form.find('div.editable-input').append($('<div class="editable-clear">').append(this.input.$clear));
|
this.$form.find('div.editable-input').append($('<div class="editable-clear">').append(this.input.$clear));
|
||||||
@ -156,11 +161,10 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
|||||||
submit: function(e) {
|
submit: function(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var error,
|
var error,
|
||||||
//get value from input
|
newValue = this.input.input2value(), //get new value from input
|
||||||
newValue = this.input.input2value(),
|
newValueStr;
|
||||||
newValueStr;
|
|
||||||
|
|
||||||
//validation
|
//validation
|
||||||
if (error = this.validate(newValue)) {
|
if (error = this.validate(newValue)) {
|
||||||
@ -168,14 +172,14 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
|||||||
this.showForm();
|
this.showForm();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
//value as string
|
//value as string
|
||||||
newValueStr = this.input.value2str(newValue);
|
newValueStr = this.input.value2str(newValue);
|
||||||
|
|
||||||
//if value not changed --> cancel
|
//if value not changed --> cancel
|
||||||
/*jslint eqeq: true*/
|
/*jslint eqeq: true*/
|
||||||
if (newValueStr == this.input.value2str(this.value)) {
|
if (newValueStr == this.input.value2str(this.value)) {
|
||||||
/*jslint eqeq: false*/
|
/*jslint eqeq: false*/
|
||||||
this.cancel();
|
this.cancel();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -186,14 +190,14 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
|||||||
//run success callback
|
//run success callback
|
||||||
var res = typeof this.options.success === 'function' ? this.options.success.call(this, response, newValue) : null;
|
var res = typeof this.options.success === 'function' ? this.options.success.call(this, response, newValue) : null;
|
||||||
|
|
||||||
//if it returns string --> show error
|
//if success callback returns string --> show error
|
||||||
if(res && typeof res === 'string') {
|
if(res && typeof res === 'string') {
|
||||||
this.error(res);
|
this.error(res);
|
||||||
this.showForm();
|
this.showForm();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
//if it returns object like {newValue: <something>} --> use that value
|
//if success callback returns object like {newValue: <something>} --> use that value instead of submitted
|
||||||
if(res && typeof res === 'object' && res.hasOwnProperty('newValue')) {
|
if(res && typeof res === 'object' && res.hasOwnProperty('newValue')) {
|
||||||
newValue = res.newValue;
|
newValue = res.newValue;
|
||||||
}
|
}
|
||||||
@ -446,17 +450,18 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
|||||||
@type boolean
|
@type boolean
|
||||||
@default true
|
@default true
|
||||||
**/
|
**/
|
||||||
showbuttons: true,
|
showbuttons: false
|
||||||
/**
|
|
||||||
|
/*todo:
|
||||||
Submit strategy. Can be <code>normal|never</code>
|
Submit strategy. Can be <code>normal|never</code>
|
||||||
<code>submit='never'</code> usefull for turning into classic form several inputs and submitting them together manually.
|
<code>submitmode='never'</code> usefull for turning into classic form several inputs and submitting them together manually.
|
||||||
Works pretty with <code>showbuttons=false</code>
|
Works pretty with <code>showbuttons=false</code>
|
||||||
|
|
||||||
@property submit
|
@property submitmode
|
||||||
@type string
|
@type string
|
||||||
@default normal
|
@default normal
|
||||||
**/
|
*/
|
||||||
submit: 'normal'
|
// submitmode: 'normal'
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -127,7 +127,14 @@ To create your own input you should inherit from this class.
|
|||||||
**/
|
**/
|
||||||
escape: function(str) {
|
escape: function(str) {
|
||||||
return $('<div>').text(str).html();
|
return $('<div>').text(str).html();
|
||||||
}
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
attach handler to automatically submit form when value changed (usefull when buttons not shown)
|
||||||
|
**/
|
||||||
|
autosubmit: function() {
|
||||||
|
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
Abstract.defaults = {
|
Abstract.defaults = {
|
||||||
|
@ -112,7 +112,15 @@ $(function(){
|
|||||||
|
|
||||||
activate: function() {
|
activate: function() {
|
||||||
this.$input.find('input[type="checkbox"]').first().focus();
|
this.$input.find('input[type="checkbox"]').first().focus();
|
||||||
}
|
},
|
||||||
|
|
||||||
|
autosubmit: function() {
|
||||||
|
this.$input.find('input[type="checkbox"]').on('keydown', function(e){
|
||||||
|
if (e.which === 13) {
|
||||||
|
$(this).closest('form').submit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Checklist.defaults = $.extend({}, $.fn.editableform.types.list.defaults, {
|
Checklist.defaults = $.extend({}, $.fn.editableform.types.list.defaults, {
|
||||||
|
@ -95,7 +95,16 @@ $(function(){
|
|||||||
clear: function() {
|
clear: function() {
|
||||||
this.$input.data('datepicker').date = null;
|
this.$input.data('datepicker').date = null;
|
||||||
this.$input.find('.active').removeClass('active');
|
this.$input.find('.active').removeClass('active');
|
||||||
}
|
},
|
||||||
|
|
||||||
|
autosubmit: function() {
|
||||||
|
this.$input.on('changeDate', function(e){
|
||||||
|
var $form = $(this).closest('form');
|
||||||
|
setTimeout(function() {
|
||||||
|
$form.submit();
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -112,7 +112,16 @@ $(function(){
|
|||||||
|
|
||||||
clear: function() {
|
clear: function() {
|
||||||
this.$input.datepicker('setDate', null);
|
this.$input.datepicker('setDate', null);
|
||||||
}
|
},
|
||||||
|
|
||||||
|
autosubmit: function() {
|
||||||
|
this.$input.on('mouseup', 'table.ui-datepicker-calendar a.ui-state-default', function(e){
|
||||||
|
var $form = $(this).closest('form');
|
||||||
|
setTimeout(function() {
|
||||||
|
$form.submit();
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -45,7 +45,13 @@ $(function(){
|
|||||||
text = item.text;
|
text = item.text;
|
||||||
}
|
}
|
||||||
Select.superclass.constructor.superclass.value2html(text, element);
|
Select.superclass.constructor.superclass.value2html(text, element);
|
||||||
}
|
},
|
||||||
|
|
||||||
|
autosubmit: function() {
|
||||||
|
this.$input.on('change', function(){
|
||||||
|
$(this).closest('form').submit();
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Select.defaults = $.extend({}, $.fn.editableform.types.list.defaults, {
|
Select.defaults = $.extend({}, $.fn.editableform.types.list.defaults, {
|
||||||
|
Reference in New Issue
Block a user