success moved to editableform

src/containers/editable-container.js

@@ -107,8 +107,30 @@ Applied as jQuery method.
         Hides container with form
         @method hide()
         **/         
-        hide: function() {
+        hide: function() {  
+            if(!this.tip() || !this.tip().is(':visible')) {
+                return;
+            }
             this.call('hide');
+            /**        
+            Fired when container was hidden. It occurs on both save or cancel.
+
+            @event hidden 
+            @param {Object} event event object
+            **/             
+            this.$element.triggerHandler('hidden');   
+        },
+        
+        /**
+        Toggles container visibility (show / hide)
+        @method toggle()
+        **/          
+        toggle: function() {
+            if(this.tip && this.tip().is(':visible')) {
+                this.hide();
+            } else {
+                this.show();
+            } 
         },
 
         /*
@@ -119,12 +141,12 @@ Applied as jQuery method.
             //tbd in child class
         },
 
-        cancel: function() {
+        cancel: function() {     
             if(this.options.autohide) {
                 this.hide();
             }
             /**        
-            Fired when form was cancelled
+            Fired when form was cancelled by user
             
             @event cancel 
             @param {Object} event event object

src/containers/editable-inline.js

@@ -41,12 +41,18 @@
         }, 
         
         hide: function () {
+            if(!this.tip() || !this.tip().is(':visible')) {
+                return;
+            }            
             this.$form.hide(this.options.anim, $.proxy(function() {
                 this.$element.show();
                 //return focus on element
                 if (this.options.enablefocus) {
                     this.$element.focus();
-                }                
+                }  
+                
+                //trigger event
+                this.$element.triggerHandler('hidden');              
             }, this)); 
         },
         

src/containers/editable-tooltip.js

@@ -63,7 +63,11 @@
         },  
         
         hide: function() {
-            this.call('close');      
+            if(!this.tip() || !this.tip().is(':visible')) {
+                return;
+            }            
+            this.call('close'); 
+            this.$element.triggerHandler('hidden');     
         },
         
         setPosition: function() {

src/editable-form/editable-form.js

@@ -167,6 +167,14 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
             //sending data to server
             $.when(this.save(newValueStr))
             .done($.proxy(function(response) {
+                var error;
+                //call success callback. if it returns string --> show error
+                if(error = this.options.success.call(this, response, newValue)) {
+                    this.error(error);
+                    this.showForm();
+                    return;
+                }                
+                
                //clear error message
                this.error(false);   
                this.value = newValue;
@@ -367,7 +375,20 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
             }
         }
         **/         
-        validate: null
+        validate: null,
+        /**
+        Success callback. Called when value successfully sent on server and response status = 200.
+        Can be used to process json response. If this function returns string - means error occured and string is shown as error message.
+        
+        @property success 
+        @type function
+        @default null
+        @example
+        success: function(response, newValue) {
+            if(!response.success) return response.msg;
+        }
+        **/          
+        success: function(response, newValue) {}         
     };   
 
     /*

src/element/editable-element.js

@@ -220,7 +220,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             if(!this.container) {
                 var containerOptions = $.extend({}, this.options, {
                     value: this.value,
-                    autohide: false
+                    autohide: false //element itsef will show/hide container
                 });
                 this.$element.editableContainer(containerOptions);
                 this.$element.on({
@@ -243,22 +243,22 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         Hides container with form
         @method hide()
         **/       
-        hide: function () {
+        hide: function () {   
-            if(this.container && this.container.tip().is(':visible')) {
+            if(this.container) {  
                 this.container.hide();
-                
-                //return focus on element
-                if (this.options.enablefocus && this.options.toggle === 'click') {
-                    this.$element.focus();
-                }                
             }
+                
+            //return focus on element
+            if (this.options.enablefocus && this.options.toggle === 'click') {
+                this.$element.focus();
+            }                
         },
         
         /**
         Toggles container visibility (show / hide)
         @method toggle()
         **/  
-        toggle: function () {
+        toggle: function() {
             if(this.container && this.container.tip().is(':visible')) {
                 this.hide();
             } else {
@@ -270,16 +270,6 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         * called when form was submitted
         */          
         save: function(e, params) {
-             var error, form;
-             
-             //if sent to server, call success callback. if it return string --> show error
-             if((params.response !== undefined) && (error = this.options.success.call(this, params.response, params.newValue))) {
-                 form = this.container.tip().find('form').parent().data('editableform');
-                 form.error(error);
-                 form.showForm();
-                 return;
-             }
-           
             //if url is not user's function and value was not sent to server and value changed --> mark element with unsaved css. 
             if(typeof this.options.url !== 'function' && params.response === undefined && this.input.value2str(this.value) !== this.input.value2str(params.newValue)) { 
                 this.$element.addClass('editable-unsaved');
@@ -539,20 +529,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         @type mixed
         @default element's text
         **/
-        value: null,
+        value: null
-        /**
-        Success callback. Called when value successfully sent on server and response status = 200.
-        Can be used to process json response. If this function returns string - means error occured and string is shown as error message.
-        
-        @property success 
-        @type function
-        @default null
-        @example
-        success: function(response, newValue) {
-            if(!response.success) return response.msg;
-        }
-        **/          
-        success: function(response, newValue) {} 
     };
     
 }(window.jQuery));

test/unit/api.js

@@ -179,8 +179,8 @@ $(function () {
      });  
               
      
-     asyncTest("events: shown / cancel", function () {
+     asyncTest("events: shown / cancel / hidden", function () {
-        expect(2);
+        expect(3);
         var val = '1',
             e = $('<a href="#" data-pk="1" data-type="select" data-url="post.php" data-name="text" data-value="'+val+'"></a>').appendTo(fx);
         
@@ -192,7 +192,12 @@ $(function () {
         e.on('cancel', function(event) {
              var editable = $(this).data('editable');
              ok(true, 'cancel triggered'); 
-        });        
+        });     
+        
+        e.on('hidden', function(event) {
+             var editable = $(this).data('editable');
+             ok(true, 'hidden triggered'); 
+        });            
         
         e.editable({
             source: 'groups.php',
@@ -209,7 +214,38 @@ $(function () {
              }, timeout);
         }, timeout);                                        
         
-     });     
+     });    
+     
+     asyncTest("event: save / hidden", function () {
+        expect(2);
+        var val = '1',
+            e = $('<a href="#" data-pk="1" data-type="select" data-url="post.php" data-name="text" data-value="'+val+'"></a>').appendTo(fx);
+        
+        e.on('save', function(event, params) {
+            var editable = $(this).data('editable');
+            equal(params.newValue, 2, 'save triggered, value correct');
+        });
+        
+        e.on('hidden', function(event) {
+             var editable = $(this).data('editable');
+             ok(true, 'hidden triggered'); 
+        });         
+        
+        e.editable({
+            source: 'groups.php',
+        });
+        
+        e.click();
+        var p = tip(e);
+        p.find('select').val(2);
+        p.find('form').submit(); 
+        
+        setTimeout(function() {
+             p.find('button[type=button]').click(); 
+             e.remove();    
+             start();  
+        }, timeout);                                        
+     });       
   
    
      test("show/hide/toggle methods", function () {
@@ -375,7 +411,7 @@ $(function () {
      }); 
      
      
-     test("setValue", function () {
+     test("setValue method", function () {
         var e = $('<a href="#" data-name="name" data-type="select" data-url="post.php"></a>').appendTo('#qunit-fixture').editable({
             value: 1,
             source: groups

test/unit/common.js

@@ -107,7 +107,7 @@
         ok(!p2.is(':visible'), 'popover2 closed');
       });
       
-     test("click outside popoover should hide it", function () {
+     test("click outside container should hide it", function () {
         var e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo('#qunit-fixture').editable(),
             e1 = $('<div>').appendTo('body');
         

test/unit/text.js

@@ -186,13 +186,14 @@ $(function () {
         }, timeout);                     
       });       
       
-     asyncTest("should show error if success callback return string", function () {
+     asyncTest("should show error if success callback returns string", function () {
-        var e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo(fx).editable({
+        var newText = 'cd<e>;"',
-             success: function(data) {
+            e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo(fx).editable({
+             success: function(response, newValue) {
+                 equal(newValue, newText, 'value in success passed correctly');
                  return 'error';
              } 
-          }),  
+          });  
-          newText = 'cd<e>;"'
 
         e.click()
         var p = tip(e);
@@ -211,7 +212,7 @@ $(function () {
            start();  
         }, timeout);             
         
-      })   
+      });   
    
       asyncTest("should submit all required params", function () {
         var e = $('<a href="#" data-pk="1" data-url="post-resp.php">abc</a>').appendTo(fx).editable({