added `do not close popup when it is saving value, fix #224

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)

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');
         },
 

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);

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');