可编辑的异步错误恢复 [英] Jeditable Async revert on error

问题描述

我一直在将JEditable插件用于JQuery，我想将错误返回给该插件，以指示它恢复为先前的值并向用户显示错误.我使用同步ajax调用来工作，但是我宁愿使用异步回调.我需要的代码如下.

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.

谢谢

编辑

尝试抖动建议并使其在IE8中运行后，当我单击按钮 only 时，我意识到问题出在FF和chrome.如果我单击该字段，请进行编辑，然后按Enter键，一切都很好.触发回调，并重置该值.

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.

如果我单击该字段，请进行编辑，然后单击确定"按钮，但未收到确认错误，则该表单将保持活动状态，并位于该位置.如果在执行该部分时收到错误消息，文本值将恢复为原始值，但是我无法再次单击该字段，看来jeditable已解除绑定.

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.

我可以确认萤火虫中已收到帖子和响应，因此ajax正在触发.

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

{"errorMsg":"}

{"errorMsg":""}

如果按Enter键，但是如果单击确定"按钮，为什么这在所有浏览器中都能正常运行?无论哪种方式都将执行相同的代码，并且按钮肯定可以正确提交表单.

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?

推荐答案

这根本行不通吗?

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

这篇关于可编辑的异步错误恢复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！