Jeditable Async will return to error

Question

I am using the JEditable plugin for jQuery, and I would like to return errors to the plugin to enable it to return to the previous value, as well as display the error to the user. This works for me using a synchronous ajax call, but I would rather use an asynchronous callback instead. The code I have 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 also included my synchronous implementation in the comment, which works well. In a scenario with a high server load, this blocks the browser until editing is completed in the background. The identifier rather returns a value and returns it later if editing fails.

Thanks,

EDIT

After you tried the jitters offer and earned it in IE8, I realized that the problem is with FF and chrome when I press the button only . If I click on the field, edit, and then press Enter, everything will be fine. The callback fires and the value gets reset.

If I click on the field, edit, and then click the OK button and don’t receive or check the error, the form remains active and just sits there. If an error is received, this part is executed, the text value is returned to the original, however I cannot then click the field again, the jeditable was unbound.

I can confirm that the message and responses are accepted in firebug so that ajax starts up.

{"ErrorMsg": ""}

Why does this work perfectly in all browsers if I press the enter button, but not if I press the OK button? The same code runs anyway, and the button certainly represents the form correctly.

A non-binding thing also happens only when the buttons are pressed.

Does anyone have an example of using jeditable and handling server side validation issues like these?

Answer 1

It just 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); } } ... 

Answer 2

There is another way, you can consider the jeditable onerror function.

 ... onerror: function(settings, original, xhr) { $.secureEvalJSON(xhr.responseText); if (response.errorMsg != '') { var origvalue = ...; $("#ajaxNotify").addClass("ajax_error").html(response.errorMsg); console.log("Setting back to original value " + origvalue); $(original).html(origvalue); } } ...