From ed836c22711209a57c2bbd660d06bd40aeb5e48b Mon Sep 17 00:00:00 2001
From: vitalets <noginsk@rambler.ru>
Date: Fri, 30 Nov 2012 18:48:42 +0400
Subject: [PATCH] autosubmit method
---
src/editable-form/editable-form.js | 35 +++++++++++++++++-------------
src/inputs/abstract.js | 9 +++++++-
src/inputs/checklist.js | 10 ++++++++-
src/inputs/date/date.js | 11 +++++++++-
src/inputs/dateui/dateui.js | 11 +++++++++-
src/inputs/select.js | 8 ++++++-
6 files changed, 64 insertions(+), 20 deletions(-)
diff --git a/src/editable-form/editable-form.js b/src/editable-form/editable-form.js
index 7373ec7..12ae191 100644
--- a/src/editable-form/editable-form.js
+++ b/src/editable-form/editable-form.js
@@ -11,7 +11,7 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
var EditableForm = function (element, 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();
};
@@ -69,6 +69,11 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
//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
if(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) {
e.stopPropagation();
e.preventDefault();
-
+
var error,
- //get value from input
- newValue = this.input.input2value(),
- newValueStr;
+ newValue = this.input.input2value(), //get new value from input
+ newValueStr;
//validation
if (error = this.validate(newValue)) {
@@ -168,14 +172,14 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
this.showForm();
return;
}
-
+
//value as string
newValueStr = this.input.value2str(newValue);
//if value not changed --> cancel
/*jslint eqeq: true*/
if (newValueStr == this.input.value2str(this.value)) {
- /*jslint eqeq: false*/
+ /*jslint eqeq: false*/
this.cancel();
return;
}
@@ -186,14 +190,14 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
//run success callback
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') {
this.error(res);
this.showForm();
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')) {
newValue = res.newValue;
}
@@ -446,17 +450,18 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
@type boolean
@default true
**/
- showbuttons: true,
- /**
+ showbuttons: false
+
+ /*todo:
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>
- @property submit
+ @property submitmode
@type string
@default normal
- **/
- submit: 'normal'
+ */
+// submitmode: 'normal'
};
/*
diff --git a/src/inputs/abstract.js b/src/inputs/abstract.js
index fe7ed84..0da5ddb 100644
--- a/src/inputs/abstract.js
+++ b/src/inputs/abstract.js
@@ -127,7 +127,14 @@ To create your own input you should inherit from this class.
**/
escape: function(str) {
return $('<div>').text(str).html();
- }
+ },
+
+ /**
+ attach handler to automatically submit form when value changed (usefull when buttons not shown)
+ **/
+ autosubmit: function() {
+
+ }
};
Abstract.defaults = {
diff --git a/src/inputs/checklist.js b/src/inputs/checklist.js
index 7f76b5b..60af4ce 100644
--- a/src/inputs/checklist.js
+++ b/src/inputs/checklist.js
@@ -112,7 +112,15 @@ $(function(){
activate: function() {
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, {
diff --git a/src/inputs/date/date.js b/src/inputs/date/date.js
index 6490021..2fb8eab 100644
--- a/src/inputs/date/date.js
+++ b/src/inputs/date/date.js
@@ -95,7 +95,16 @@ $(function(){
clear: function() {
this.$input.data('datepicker').date = null;
this.$input.find('.active').removeClass('active');
- }
+ },
+
+ autosubmit: function() {
+ this.$input.on('changeDate', function(e){
+ var $form = $(this).closest('form');
+ setTimeout(function() {
+ $form.submit();
+ }, 200);
+ });
+ }
});
diff --git a/src/inputs/dateui/dateui.js b/src/inputs/dateui/dateui.js
index 5b39f27..a8978dc 100644
--- a/src/inputs/dateui/dateui.js
+++ b/src/inputs/dateui/dateui.js
@@ -112,7 +112,16 @@ $(function(){
clear: function() {
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);
+ });
+ }
});
diff --git a/src/inputs/select.js b/src/inputs/select.js
index 9497ae1..42ffc77 100644
--- a/src/inputs/select.js
+++ b/src/inputs/select.js
@@ -45,7 +45,13 @@ $(function(){
text = item.text;
}
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, {