diff --git a/CHANGELOG.txt b/CHANGELOG.txt index ae31a70..d73078a 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -3,6 +3,7 @@ X-editable changelog Version 1.4.5 wip ---------------------------- +[bug #224] do not close popup when it is saving value (vitalets) [enh] added `submitValue` to `save` event params (vitalets) [enh #259] allow `getValue` method to return value itself, not object (vitalets) [enh] add `destroy` method to inputs (vitalets) diff --git a/src/containers/editable-container.js b/src/containers/editable-container.js index 0fb1c5c..4dcf3c3 100644 --- a/src/containers/editable-container.js +++ b/src/containers/editable-container.js @@ -33,6 +33,9 @@ Applied as jQuery method. this.formOptions.scope = this.$element[0]; this.initContainer(); + + //flag to hide container, when saving value will finish + this.delayedHide = false; //bind 'destroyed' listener to destroy container when element is removed from dom this.$element.on('destroyed', $.proxy(function(){ @@ -137,7 +140,14 @@ Applied as jQuery method. save: $.proxy(this.save, this), //click on submit button (value changed) nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed) cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on calcel button - show: $.proxy(this.setPosition, this), //re-position container every time form is shown (occurs each time after loading state) + show: $.proxy(function() { + if(this.delayedHide) { + this.hide(this.delayedHide.reason); + this.delayedHide = false; + } else { + this.setPosition(); + } + }, this), //re-position container every time form is shown (occurs each time after loading state) rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed rendered: $.proxy(function(){ @@ -218,6 +228,14 @@ Applied as jQuery method. return; } + //if form is saving value, schedule hide + if(this.$form.data('editableform').isSaving) { + this.delayedHide = {reason: reason}; + return; + } else { + this.delayedHide = false; + } + this.$element.removeClass('editable-open'); this.innerHide(); @@ -293,7 +311,7 @@ Applied as jQuery method. **/ this.$element.triggerHandler('save', params); - //hide must be after trigger, as saving value may require methods od plugin, applied to input + //hide must be after trigger, as saving value may require methods of plugin, applied to input this.hide('save'); }, diff --git a/src/editable-form/editable-form.js b/src/editable-form/editable-form.js index 97f9e4e..a690ba5 100644 --- a/src/editable-form/editable-form.js +++ b/src/editable-form/editable-form.js @@ -60,6 +60,10 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc. //show loading state this.showLoading(); + //flag showing is form now saving value to server. + //It is needed to wait when closing form. + this.isSaving = false; + /** Fired when rendering starts @event rendering @@ -215,9 +219,13 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc. //convert value for submitting to server var submitValue = this.input.value2submit(newValue); + this.isSaving = true; + //sending data to server $.when(this.save(submitValue)) .done($.proxy(function(response) { + this.isSaving = false; + //run success callback var res = typeof this.options.success === 'function' ? this.options.success.call(this.options.scope, response, newValue) : null; @@ -261,6 +269,8 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc. this.$div.triggerHandler('save', {newValue: newValue, submitValue: submitValue, response: response}); }, this)) .fail($.proxy(function(xhr) { + this.isSaving = false; + var msg; if(typeof this.options.error === 'function') { msg = this.options.error.call(this.options.scope, xhr, newValue); diff --git a/test/unit/api.js b/test/unit/api.js index fd04317..e941001 100644 --- a/test/unit/api.js +++ b/test/unit/api.js @@ -180,6 +180,33 @@ $(function () { }, timeout); }); + asyncTest("hide when saving value", function () { + var newVal = 2, + e = $('<a href="#" data-pk="1" data-type="select" data-url="post.php" data-name="text" data-value="1"></a>') + .appendTo(fx) + .editable({ + source: groupsArr + }); + + e.click(); + var p = tip(e); + p.find('select').val(2); + p.find('form').submit(); + + e.parent().click(); + + ok(p.is(':visible'), 'popover still visible'); + + setTimeout(function() { + equal(e.data('editable').value, newVal, 'new value saved'); + ok(!p.is(':visible'), 'popover closed'); + + e.remove(); + start(); + }, timeout); + + }); + test("show/hide/toggle methods", function () { var e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo('#qunit-fixture').editable(); e.editable('show');