rename fail to error, add test, fix #219

CHANGELOG.txt

@@ -4,6 +4,7 @@ X-editable changelog
 
 Version 1.4.4 wip
 ----------------------------
+[enh #219] added `error` callback (joekaiser)
 [enh #198] new value of showbuttons: 'bottom' (vitalets)
 [enh #192] add class editable-popup to have diferent css for popup and inline (vitalets)
 [enh] update to bootstrap-datepicker 1.0.2 (vitalets)

src/editable-form/editable-form.js

@@ -257,31 +257,15 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
                 this.$div.triggerHandler('save', {newValue: newValue, response: response});
             }, this))
             .fail($.proxy(function(xhr) {
-                var res = typeof this.options.fail === 'function' ? this.options.fail.call(this.options.scope, xhr, newValue) : null;
+                var msg;
-
+                if(typeof this.options.error === 'function') {
-                //if fail callback returns false --> keep form open and do not activate input
+                    msg = this.options.error.call(this.options.scope, xhr, newValue);
-                if (res === false) {
+                } else {
-                    this.error(false);
+                    msg = typeof xhr === 'string' ? xhr : xhr.responseText || xhr.statusText || 'Unknown error!';
-                    this.showForm(false);
-                    return;
                 }
-
+                
-                //if fail callback returns string -->  keep form open, show error and activate input               
+                this.error(msg);
-                if (typeof res === 'string') {
+                this.showForm();
-                    this.error(res);
-                    this.showForm();
-                    return;
-                }
-
-                //if fail callback returns object like {newValue: <something>} --> use that value instead of submitted
-                //it is usefull if you want to chnage value in url-function
-                if (res && typeof res === 'object' && res.hasOwnProperty('newValue')) {
-                    this.value = res.newValue;
-                }
-
-                //use the default behavior
-                this.error(typeof xhr === 'string' ? xhr : xhr.responseText || xhr.statusText || 'Unknown error!'); 
-                this.showForm();  
             }, this));
         },
 
@@ -501,7 +485,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
         validate: null,
         /**
         Success callback. Called when value successfully sent on server and **response status = 200**.  
-        Useful to work with json response. For example, if your backend response can be <code>{success: true}</code>
+        Usefull to work with json response. For example, if your backend response can be <code>{success: true}</code>
         or <code>{success: false, msg: "server error"}</code> you can check it inside this callback.  
         If it returns **string** - means error occured and string is shown as error message.  
         If it returns **object like** <code>{newValue: &lt;something&gt;}</code> - it overwrites value, submitted by user.  
@@ -517,21 +501,24 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
         **/          
         success: null,
         /**
-        Fail callback. Called when the call to the server failed.  
+        Error callback. Called when request failed (response status != 200).  
-        Useful when you want to display a custom message for an error response.
+        Usefull when you want to parse error response and display a custom message.
-        If it returns **string** - the return value will be displayed in the error block
+        Must return **string** - the message to be displayed in the error block.
-        If it returns **object like** <code>{newValue: &lt;something&gt;}</code> - it overwrites value, submitted by user.  
+                
-        Otherwise newValue simply rendered into element.
+        @property error 
-        
-        @property fail 
         @type function
         @default null
+        @since 1.4.4
         @example
-        fail: function(response, newValue) {
+        error: function(response, newValue) {
-            return response.responseText || response.statusText || 'Unknown error!'
+            if(response.status === 500) {
+                return 'Service unavailable. Please try later.';
+            } else {
+                return response.responseText;
+            }
         }
         **/          
-        fail: null,
+        error: null,
         /**
         Additional options for submit ajax request.
         List of values: http://api.jquery.com/jQuery.ajax

test/unit/text.js

@@ -188,7 +188,37 @@ $(function () {
            start();  
         }, timeout);             
         
-      });      
+      }); 
+      
+      asyncTest("should show custom error if `error` callback returns string", function () {
+        var newText = 'cd<e>;"',
+            e = $('<a href="#" data-pk="1" data-url="error.php" data-name="text1">abc</a>').appendTo(fx).editable({
+             error: function(response, newValue) {
+                 ok(this === e[0], 'scope is ok');
+                 equal(response.status, 500, 'response status ok');
+                 equal(newValue, newText, 'value in success passed correctly');
+                 return 'error';
+             } 
+          }); 
+
+        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 still shown');  
+           ok(p.find('.editable-error-block').length, 'class "editable-error-block" exists');
+           equal(p.find('.editable-error-block').text(), 'error', 'error msg shown');   
+           p.find('.editable-cancel').click(); 
+           ok(!p.is(':visible'), 'popover was removed');
+           e.remove();    
+           start();  
+        }, timeout);             
+        
+      });             
        
               
      asyncTest("ajaxOptions", function () {