Jeditable Async revert on error

Question

Hi,

I have been using the JEditable plugin for JQuery and I would like to return errors to the plugin to instruct it to revert to the previous value and also display an error to the user. I have this working using a synchronous ajax call but I would prefer to use asynchronous callback instead. The code I have to far is below.

$("#editbox").editable(submitEdit, { 
     indicator : "Saving...",
     tooltip   : "Click to edit...",
     name : "Editable.EmailAddress",
     id   : "elementid",
     type : "text",
     submit  : "<span class=\"mini_button\">Ok</span>",
     cssclass : "edit_text"
});
function submitEdit(value, settings)
{ 
     var edits = new Object();
     var origvalue = this.revert;
     var textbox = this;
     edits[settings.name] = [value];
     var returned = $.ajax({
                        url: "http://someurl.com/edit/", 
                        type: "POST",
                        /*async: false,*/
                        data : edits,
                        dataType : "json",
                        complete : function (XMLHttpRequest, textStatus) 
                                   {
                                       alert("Setting back to original value " +origvalue);
                                       $(textbox).html(origvalue);
                                   }
                     });

      /*var response = $.secureEvalJSON(returned.responseText);
      if (response.errorMsg != '')
      {    
          $("#ajaxNotify").addClass("ajax_error").html(response.errorMsg); 
          return(this.revert);                     
      }*/
      return(value);
 }

I have also included my synchronous implementation in comments which works well. In a high server load scenario this would lock the browser until the edit finished at the back-end. Id rather this return the value and revert it back at a later time if edit fails.

Thanks,

EDIT

After trying jitters suggestion and getting it working in IE8, I realised the issue was with FF and chrome when I click the button only. If I click the field, edit and then press enter everything is fine. The callback fires and the value gets reset.

If I click the field, edit and then click the ok button and do not receive and validation error then the form stays active and just sits there. If an error is received that portion executes, the text value gets reverted to the original, however I cannot then click the field again, jeditable has been unbound it seems.

I can confirm that the post and responses are being received in firebug so ajax is firing.

{"errorMsg":""}

Why does this work perfectly in all browsers if I press enter but not if I click the ok button? The same code gets executed either way and the button is definitely submitting the form correctly.

The unbinding thing also only happens with the button presses.

Does anyone have any example of using jeditable and handling server side validation issues such as these?

Answer 1

Simply this doesn't work?

...
complete : function (xhr, textStatus) {
  $.secureEvalJSON(xhr.responseText);
  if (response.errorMsg != '') {
    $("#ajaxNotify").addClass("ajax_error").html(response.errorMsg);
    alert("Setting back to original value " +origvalue);
    $(textbox).html(origvalue);
  }
}
...