').text(value).html();
+ var html = this.escape(value);
$(element).html(html);
},
@@ -120,7 +120,21 @@ To create your own input you should inherit from this class.
**/
clear: function() {
this.$input.val(null);
- }
+ },
+
+ /**
+ method to escape html.
+ **/
+ escape: function(str) {
+ return $('
').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 1a5b149..60af4ce 100644
--- a/src/inputs/checklist.js
+++ b/src/inputs/checklist.js
@@ -1,5 +1,6 @@
/**
-List of checkboxes. Internally value stored as javascript array of values.
+List of checkboxes.
+Internally value stored as javascript array of values.
@class checklist
@extends list
@@ -49,6 +50,8 @@ $(function(){
value2str: function(value) {
return $.isArray(value) ? value.join($.trim(this.options.separator)) : '';
+ //it is also possible to sent as array
+ //return value;
},
//parse separated string
@@ -68,11 +71,17 @@ $(function(){
var $checks = this.$input.find('input[type="checkbox"]');
$checks.removeAttr('checked');
if($.isArray(value) && value.length) {
- $checks.each(function(i, el) {
- if($.inArray($(el).val(), value) !== -1) {
- $(el).attr('checked', 'checked');
- }
- });
+ $checks.each(function(i, el) {
+ var $el = $(el);
+ // cannot use $.inArray as it performs strict comparison
+ $.each(value, function(j, val){
+ /*jslint eqeq: true*/
+ if($el.val() == val) {
+ /*jslint eqeq: false*/
+ $el.attr('checked', 'checked');
+ }
+ });
+ });
}
},
@@ -99,7 +108,19 @@ $(function(){
html = this.options.limitText.replace('{checked}', $.isArray(value) ? value.length : 0).replace('{count}', this.sourceData.length);
}
$(element).html(html);
- }
+ },
+
+ 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, {
diff --git a/test/loader.js b/test/loader.js
index ba91063..b1b4a6b 100644
--- a/test/loader.js
+++ b/test/loader.js
@@ -80,8 +80,7 @@ function getAssets(f, c, src, libs) {
//core
js.unshift(bootstrap+'js/bootstrap.js')
css.unshift(bootstrap+'css/bootstrap.css');
-// css.push(bootstrap+'css/bootstrap.css');
- //css.unshift(bootstrap+'css/bootstrap-responsive.css');
+ css.unshift(bootstrap+'css/bootstrap-responsive.css');
//editable
js.push(forms+'editable-form-bootstrap.js');
diff --git a/test/unit/api.js b/test/unit/api.js
index 313e682..47f6ca2 100644
--- a/test/unit/api.js
+++ b/test/unit/api.js
@@ -287,7 +287,7 @@ $(function () {
});
- test("option method", function () {
+ test("option method (string and object)", function () {
var e = $('
abc').appendTo('#qunit-fixture').editable(),
e1 = $('
abc').appendTo('#qunit-fixture').editable(),
url = 'abc';
@@ -296,6 +296,12 @@ $(function () {
equal(e.data('editable').options.pk, 2, 'pk set correctly');
equal(e1.data('editable').options.pk, 2, 'pk2 set correctly');
+
+ $('#qunit-fixture a').editable('option', {pk: 3, value: 'abcd'});
+
+ equal(e.data('editable').options.pk, 3, 'pk set correctly (by object)');
+ equal(e.data('editable').value, 'abcd', 'value set correctly (by object)');
+ equal(e.text(), 'abcd', 'text set correctly (by object)');
});
asyncTest("'submit' method: client and server validation", function () {
diff --git a/test/unit/common.js b/test/unit/common.js
index 468c48e..a5e6eb6 100644
--- a/test/unit/common.js
+++ b/test/unit/common.js
@@ -78,7 +78,7 @@
e.click();
var p = tip(e);
- ok(p.is(':visible'), 'popover shown');
+ ok(p.is(':visible'), 'popover shown');
//todo: for jqueryui phantomjs calcs wrong position. Need investigation
if(!$.browser.webkit && fc.f !== 'jqueryui') {
@@ -90,41 +90,195 @@
e.remove();
});
- test("should close all other containers on click on editable", function () {
- var e1 = $('
abc').appendTo('#qunit-fixture').editable(),
- e2 = $('
abcd').appendTo('#qunit-fixture').editable();
-
- e1.click()
- var p1 = tip(e1);
- ok(p1.is(':visible'), 'popover1 visible');
-
- e2.click()
- var p2 = tip(e2);
- ok(p2.is(':visible'), 'popover2 visible');
- ok(!p1.is(':visible'), 'popover1 closed');
-
- p2.find('button[type=button]').click();
- ok(!p2.is(':visible'), 'popover2 closed');
- });
-
- test("click outside container should hide it", function () {
- var e = $('
abc').appendTo('#qunit-fixture').editable(),
- e1 = $('
').appendTo('body');
-
+ test("onblur: cancel", function () {
+ var oldValue = 'abc',
+ newValue = 'cde',
+ e = $('
'+oldValue+'').appendTo('#qunit-fixture').editable({
+ onblur: 'cancel',
+ url: function() {}
+ }),
+ e2 = $('
abcd').appendTo('#qunit-fixture').editable();
+
+ //click inside
e.click();
var p = tip(e);
- ok(p.is(':visible'), 'popover shown');
-
+ ok(p.is(':visible'), 'popover1 visible');
+ p.find('input').val(newValue);
p.click();
- ok(p.is(':visible'), 'popover still shown');
+ p.find('input').click();
+ ok(p.is(':visible'), 'popover1 still visible');
+
+ //click outside
+ p.find('input').val(newValue);
+ $('#qunit-fixture').click();
+ ok(!p.is(':visible'), 'popover1 closed');
+ equal(e.data('editable').value, oldValue, 'old value exists');
- e1.click();
- ok(!p.is(':visible'), 'popover closed');
- });
+ //click on another editable
+ e.click();
+ p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ p.find('input').val(newValue);
+ e2.click();
+ var p2 = tip(e2);
+ ok(!p.is(':visible'), 'popover1 closed');
+ ok(p2.is(':visible'), 'popover2 visible');
+ equal(e.data('editable').value, oldValue, 'old value exists');
+ e2.editable('hide');
+ ok(!p2.is(':visible'), 'popover2 closed');
+
+ //call show method of another editable, closeAll = true (default)
+ e.click();
+ p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ p.find('input').val(newValue);
+ e2.editable('show');
+ p2 = tip(e2);
+ ok(!p.is(':visible'), 'popover1 closed');
+ ok(p2.is(':visible'), 'popover2 visible');
+ equal(e.data('editable').value, oldValue, 'old value exists');
+ e2.editable('hide');
+ ok(!p2.is(':visible'), 'popover2 closed');
+
+ //call show method of another editable, closeAll = false
+ e.click();
+ p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ p.find('input').val(newValue);
+ e2.editable('show', false);
+ p2 = tip(e2);
+ ok(p.is(':visible'), 'popover1 visible');
+ ok(p2.is(':visible'), 'popover2 visible');
+
+ e.editable('hide');
+ e2.editable('hide');
+ ok(!p.is(':visible'), 'popover1 closed');
+ ok(!p2.is(':visible'), 'popover2 closed');
+ });
+
+ test("onblur: submit", function () {
+ var oldValue = 'abc',
+ newValue = 'cde',
+ e = $('
'+oldValue+'').appendTo('#qunit-fixture').editable({
+ onblur: 'submit',
+ url: function() {}
+ }),
+ e2 = $('
abcd').appendTo('#qunit-fixture').editable();
+
+ //click inside
+ e.click();
+ var p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ p.find('input').val(newValue);
+ p.click();
+ p.find('input').click();
+ ok(p.is(':visible'), 'popover1 still visible');
+
+ //click outside
+ p.find('input').val(newValue);
+ $('#qunit-fixture').click();
+ ok(!p.is(':visible'), 'popover1 closed');
+ equal(e.data('editable').value, newValue, 'new value saved');
+
+ //click on another editable
+ e.click();
+ p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ p.find('input').val(oldValue);
+ e2.click();
+ var p2 = tip(e2);
+ ok(!p.is(':visible'), 'popover1 closed');
+ ok(p2.is(':visible'), 'popover2 visible');
+ equal(e.data('editable').value, oldValue, 'old value re-saved');
+ e2.editable('hide');
+ ok(!p2.is(':visible'), 'popover2 closed');
+
+ //call show method of another editable, closeAll = true (default)
+ e.click();
+ p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ p.find('input').val(newValue);
+ e2.editable('show');
+ p2 = tip(e2);
+ ok(!p.is(':visible'), 'popover1 closed');
+ ok(p2.is(':visible'), 'popover2 visible');
+ equal(e.data('editable').value, newValue, 'new value saved');
+ e2.editable('hide');
+ ok(!p2.is(':visible'), 'popover2 closed');
+
+ //call show method of another editable, closeAll = false
+ e.click();
+ p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ p.find('input').val(oldValue);
+ e2.editable('show', false);
+ p2 = tip(e2);
+ ok(p.is(':visible'), 'popover1 visible');
+ ok(p2.is(':visible'), 'popover2 visible');
+
+ e.editable('hide');
+ e2.editable('hide');
+ ok(!p.is(':visible'), 'popover1 closed');
+ ok(!p2.is(':visible'), 'popover2 closed');
+ });
+
+ test("onblur: ignore", function () {
+ var oldValue = 'abc',
+ newValue = 'cde',
+ e = $('
'+oldValue+'').appendTo('#qunit-fixture').editable({
+ onblur: 'ignore',
+ url: function() {}
+ }),
+ e2 = $('
abcd').appendTo('#qunit-fixture').editable();
+
+ //click inside
+ e.click();
+ var p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ p.find('input').val(newValue);
+ p.click();
+ p.find('input').click();
+ ok(p.is(':visible'), 'popover1 still visible');
+
+ //click outside
+ p.find('input').val(newValue);
+ $('#qunit-fixture').click();
+ ok(p.is(':visible'), 'popover1 still visible');
+
+ //click on another editable
+ e2.click();
+ var p2 = tip(e2);
+ ok(p.is(':visible'), 'popover1 still visible');
+ ok(p2.is(':visible'), 'popover2 visible');
+ e2.editable('hide');
+ ok(!p2.is(':visible'), 'popover2 closed');
+
+ //call show method of another editable, closeAll = true (default)
+ e2.editable('show');
+ p2 = tip(e2);
+ ok(p.is(':visible'), 'popover1 still visible');
+ ok(p2.is(':visible'), 'popover2 visible');
+ e2.editable('hide');
+ ok(!p2.is(':visible'), 'popover2 closed');
+
+ //call show method of another editable, closeAll = false
+ e2.editable('show', false);
+ p2 = tip(e2);
+ ok(p.is(':visible'), 'popover1 still visible');
+ ok(p2.is(':visible'), 'popover2 visible');
+ e2.editable('hide');
+ ok(!p2.is(':visible'), 'popover2 closed');
+
+ e.editable('hide');
+ ok(!p.is(':visible'), 'popover1 closed');
+ });
+
test("should not wrap buttons when parent has position:absolute", function () {
var d = $('
').appendTo(fx),
- e = $('
abc').appendTo(d).editable();
+ e = $('
abc').appendTo(d).editable({
+ showbuttons: true
+ });
e.click();
var p = tip(e);
@@ -132,7 +286,81 @@
ok(p.find('button').offset().left > p.find('.editable-input').offset().left + p.find('.editable-input').width(), 'buttons left ok');
d.remove();
- });
+ });
+
+ test("toggle: manual", function () {
+ var e = $('
').appendTo('#qunit-fixture').editable({
+ toggle: 'manual'
+ });
+
+ e.click();
+ ok(!e.data('editableContainer'), 'popover not visible after click');
+ e.editable('show');
+ var p = tip(e);
+ ok(p.is(':visible'), 'shown manually');
+ });
+
+ test("toggle: dblclick", function () {
+ var e = $('
').appendTo('#qunit-fixture').editable({
+ toggle: 'dblclick'
+ }),
+ p, p2,
+ e2 = $('
abcd').appendTo('#qunit-fixture').editable();
+
+ e.click();
+ ok(!e.data('editableContainer'), 'popover not visible after click');
+
+ e2.click();
+ p2 = tip(e2);
+ ok(p2.is(':visible'), 'popover2 visible');
+
+ e.dblclick();
+ p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ ok(!p2.is(':visible'), 'popover2 closed');
+ });
+
+ test("toggle: mouseenter", function () {
+ var e = $('
').appendTo('#qunit-fixture').editable({
+ toggle: 'mouseenter'
+ }),
+ p, p2,
+ e2 = $('
abcd').appendTo('#qunit-fixture').editable();
+
+ e.click();
+ ok(!e.data('editableContainer'), 'popover not visible after click');
+
+ e.dblclick();
+ ok(!e.data('editableContainer'), 'popover not visible after dblclick');
+
+ e2.click();
+ p2 = tip(e2);
+ ok(p2.is(':visible'), 'popover2 visible');
+
+ e.mouseenter();
+ ok(e.data('editableContainer'), 'container defined');
+ p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible');
+ ok(!p2.is(':visible'), 'popover2 closed');
+
+ //hover once again --> container should stay open
+ e.hover();
+ p = tip(e);
+ ok(p.is(':visible'), 'popover1 visible after second hover');
+ });
+
+ test("showbuttons: false", function () {
+ var e = $('
').appendTo('#qunit-fixture').editable({
+ showbuttons: false
+ });
+
+ e.click();
+ var p = tip(e);
+ ok(p.is(':visible'), 'popover visible');
+ ok(!p.find('.editable-submit').length, 'submit not rendered');
+ ok(!p.find('.editable-cancel').length, 'cancel not rendered');
+ ok(!p.find('.editable-buttons').length, '.editable-buttons block not rendered');
+ });
//unfortunatly, testing this feature does not always work in browsers. Tested manually.
/*
diff --git a/test/unit/select.js b/test/unit/select.js
index b4b969f..05d37b3 100644
--- a/test/unit/select.js
+++ b/test/unit/select.js
@@ -450,5 +450,30 @@ $(function () {
start();
}, timeout);
});
+
+ asyncTest("autosubmit when showbuttons=false", function () {
+ expect(4);
+ var e = $('
customer').appendTo(fx).editable({
+ pk: 1,
+ source: groups,
+ showbuttons: false
+ }),
+ selected = 3;
+
+ e.click();
+ var p = tip(e);
+ equal(p.find('select').val(), e.data('editable').value, 'selected value correct');
+
+ p.find('select').val(selected);
+ p.find('select').trigger('change');
+
+ setTimeout(function() {
+ ok(!p.is(':visible'), 'popover closed');
+ equal(e.data('editable').value, selected, 'new value saved')
+ equal(e.text(), groups[selected], 'text shown correctly')
+ e.remove();
+ start();
+ }, timeout);
+ });
});
\ No newline at end of file
diff --git a/test/unit/text.js b/test/unit/text.js
index 79f1b90..f7fc3e9 100644
--- a/test/unit/text.js
+++ b/test/unit/text.js
@@ -39,18 +39,6 @@ $(function () {
p.find('button[type=button]').click();
ok(!p.is(':visible'), 'popover was removed');
});
-
- test("option 'toggle' = manual", function () {
- var e = $('
').appendTo('#qunit-fixture').editable({
- toggle: 'manual'
- });
-
- e.click();
- ok(!e.data().editableContainer, 'popover not visible after click');
- e.editable('show');
- var p = tip(e);
- ok(p.is(':visible'), 'shown manually');
- });
asyncTest("should load correct value and save new entered text (and value)", function () {
var v = 'ab
"',
@@ -211,7 +199,38 @@ $(function () {
start();
}, timeout);
- });
+ });
+
+ asyncTest("should show new value if success callback returns object", function () {
+ var newText = 'cd;"',
+ e = $('abc').appendTo(fx).editable({
+ success: function(response, newValue) {
+ equal(newValue, newText, 'value in success passed correctly');
+ return {newValue: 'xyz'};
+ }
+ });
+
+ e.click()
+ var p = tip(e);
+
+ ok(p.find('input[type=text]').length, 'input exists')
+ p.find('input').val(newText);
+ p.find('form').submit();
+
+ setTimeout(function() {
+ ok(!p.is(':visible'), 'popover closed');
+ equal(p.find('.editable-error-block').text(), '', 'no error msg');
+ equal(e.data('editable').value, 'xyz', 'value ok');
+ equal(e.text(), 'xyz', 'text ok');
+
+ p.find('button[type=button]').click();
+ ok(!p.is(':visible'), 'popover was removed');
+ e.remove();
+ start();
+ }, timeout);
+
+ });
+
asyncTest("should submit all required params", function () {
var e = $('abc').appendTo(fx).editable({
@@ -256,6 +275,9 @@ $(function () {
equal(resp.data.name, 'username', 'name ok');
equal(resp.data.value, newText, 'value ok');
equal(resp.data.q, 2, 'additional params ok');
+ },
+ ajaxOptions: {
+ headers: {"myHeader": "123"}
}
}),
newText = 'cd;"'
@@ -272,8 +294,38 @@ $(function () {
start();
}, timeout);
- });
-
+ });
+
+ asyncTest("ajaxOptions", function () {
+ var e = $('abc').appendTo(fx).editable({
+ name: 'username',
+ ajaxOptions: {
+ dataType: 'html'
+ }
+ }),
+ newText = 'cd;"'
+
+ $.mockjax({
+ url: 'post-options.php',
+ response: function(settings) {
+ equal(settings.dataType, 'html', 'dataType key ok');
+ }
+ });
+
+ e.click()
+ var p = tip(e);
+
+ ok(p.find('input[type=text]').length, 'input exists')
+ p.find('input').val(newText);
+ p.find('form').submit();
+
+ setTimeout(function() {
+ e.remove();
+ start();
+ }, timeout);
+
+ });
+
asyncTest("submit to url defined as function", function () {
expect(3);