如何摆脱 jquery (jeditable) 的混乱答案

【问题标题】：how to get out of jquery (jeditable) mess如何摆脱 jquery (jeditable) 的混乱
【发布时间】：2009-06-08 19:29:13
【问题描述】：

我不太擅长 jQuery，但我决定为我的网站使用 jEditable 插件，因为我认为它看起来不错并解决了目的。不过，我现在有点纠结。

我用这个插件编辑数据，编辑后的数据被发送到数据库，一些字段被它更新。更新这些字段的存储过程正在返回一些数据。我希望将这些数据返回给我。我只想先在“警报”语句中查看返回的数据，然后我可以从那里获取它。

这个插件的回调方法只有值和设置。

在使用这个插件时，有什么方法可以从服务器端取回一些数据？

【问题讨论】：

标签： jquery jeditable

【解决方案1】：

我已经为我的网站做到了这一点。这应该可以帮助您入门。

$("#editable_text").editable(submitEdit, { 
            indicator : "Saving...",
            tooltip   : "Click to edit...",
            name : "Editable.FieldName",
            id   : "elementid",
            type : "text",
});
function submitEdit(value, settings)
{ 
   var edits = new Object();
   var origvalue = this.revert;
   var textbox = this;
   var result = value;
   edits[settings.name] = [value];
   var returned = $.ajax({
           url: "http://URLTOPOSTTO", 
           type: "POST",
           data : edits,
           dataType : "json",
           complete : function (xhr, textStatus) 
           {
               var response =  $.secureEvalJSON(xhr.responseText);
               if (response.Message != "") 
               {
                   alert(Message);
               } 
           }
           });
   return(result);
 }

需要返回表单的Json响应

{ "消息" = "FOO" }

这将显示在警报中。

【讨论】：

+1 是否可以将提交按钮绑定到自创按钮？
轻微的挑剔，但这个 Json 响应不是相当 Json ...s/=/:/ :-)

【解决方案2】：

我也一直在使用经典的 ASP 来解决这个问题，并认为像我这样的其他人也可能会遇到这种情况。以下是我在经典 ASP 中解决此问题的方法：

服务器验证失败...来自 whatever.asp

的响应

<%
response.status "406 Not Acceptable"
response.write "error message here"
response.end
%>

发送的任何错误信息whatever.asp都可以通过onerror:访问，该字段将被重置为原始值。

$("#editable_text").editable("whatever.asp", { 
    indicator : "Saving...",
    tooltip   : "Click to edit...",
    type : "text",
    onerror: function (settings, original, xhr) {
        original.reset();
        //do whatever you want with the error msg here
        alert(xhr.responseText);
    }     
});

（如果值通过服务器验证，只需 response.write 更新的值）

【讨论】：

+1 用于提及 onerror，它有效，但似乎没有记录。但是，我认为 403 比 406 更合适，因为 406 专门针对 Accepts 标头。

【解决方案3】：

您将更新提交到的 URL（将是某种动态页面，例如 PHP、JSP、Java servlet 等）是否将存储过程的返回值添加到响应中？如果是这样，我希望这些数据会显示在它们传递给回调的“值”字段中。

当我使用 jEditable 在线演示时，响应仅包含更新后的文本，但这是他们正在使用的特定 PHP 代码的函数，与 jEditable javascript 代码没有任何关系。

【讨论】：

【解决方案4】：

中国用户可以看到这个博客：http://wxianfeng.com/2009/10/14/rails-in-place-edit-with-jquery

【讨论】：

说中文的非华人用户也可以;)

【解决方案5】：

似乎 jEditable 是 jquery ajax 方法的包装器。将所有 jEditable 调用替换为使用 jquery 的本机 ajax 方法的调用应该不会太难。

您可以将 jEditable 的名为“callback”的回调替换为“success”，它是 jquery ajax 函数中回调的名称。

【讨论】：

【解决方案6】：

文档说“回调”函数的第一个参数是“值”：

'callback': function (value, settings) {
...

文档没有说的是这里的“价值”是服务器写出的任何东西。它不限于原始值。我发回一个 JSON 编码的结构，所以我的回调函数的第一行是这样的：

var updateInfo = JSON.parse(value);

然后我根据需要从 updateInfo 结构中提取字段。

【讨论】：