为什么我的 jQuery jEditable、就地编辑回调不起作用？答案

【问题标题】：Why is my jQuery jEditable, edit-in-place callback not working?为什么我的 jQuery jEditable、就地编辑回调不起作用？
【发布时间】：2010-03-24 00:27:30
【问题描述】：

我正在使用 jQuery jEditable 就地编辑字段，但是当 JSON 函数返回并且我尝试从我的就地编辑回调中返回一个值时，我得到的只是一闪而过

你可以在这里看到这个......

http://clareshilland.unknowndomain.co.uk/

按Ctrl+L登录...

用户名：stackoverflow
密码：jquery

虽然您可以在 /script.js 中看到脚本，但这里的主要代码摘录...

$('#menu li a').editable(edit_menu_item, { cssclass: 'editable' });

这里是回调：

function edit_menu_item(value, settings) {

 $.ajax({
  type : "POST",
  cache : false,
  url  : 'ajax/menu/edit-category.php',
  dataType: 'json',
  data : { 'id': this.id, 'value': value },
  success : function(data) {

   if (data.status == 'ok') {
    alert('ok');
    return data.title;
   } else {
    alert('n/ok');
    return this.revert;   
   }

 }});

}

JSON 代码在这里：ajax/menu.edit-category.php

就地编辑位于菜单上，该菜单上也有一个可排序的 jQuery。单击即可编辑。回车保存，它存储数据但不更新就地编辑字段。

请帮助stackoverflow，我已经为此工作了很长时间。

提前致谢！

【问题讨论】：

标签： jquery ajax json jeditable inline-editing

【解决方案1】：

来自可编辑主页 (http://www.appelsiini.net/projects/jeditable)：

注意函数必须返回字符串。通常是编辑过的内容。这会编辑后显示在页面上的是完成。

edit_menu_item 不返回字符串 - 似乎您可以通过返回值来解决这个问题，然后如果您需要更新实际内容，请在您的 ajax 请求的成功回调中执行此操作。您可能还想添加一个错误回调，以防万一。

另一种可能是个坏主意的替代方法是将您的 ajax 调用标记为同步 (async : false) 并查看 responseText，但这会锁定页面直到您的请求完成。

【讨论】：

【解决方案2】：

从服务器端传递 json 对象，它将被 Javascript 视为文本。您必须使用 var myObject = JSON.parse(myJSONtext); 将其解析为 json 对象

PHP 代码

$response = new stdClass();
$response->value = $value;
print_r(json_encode($response));

JS代码

//(in Jeditable callback)
"callback": function( sValue, y ) {
    sValue = JSON.parse(sValue);
    //now you can access sValue.value
}

【讨论】：

【解决方案3】：

我遇到了同样的问题，因此我通过引入回调修改了 Jeditable 源代码，以便我可以从 AJAX“成功”处理程序内部返回字符串值。

来源 Jeditable 之前：

/* check if given target is function */
if ($.isFunction(settings.target)) {
  var str = settings.target.apply(self, [input.val(), settings]);
  $(self).html(str);
  self.editing = false;
} else {

Source Jeditable 之后：

/* check if given target is function */
if ($.isFunction(settings.target)) {
        var edit = self;
        settings.target.apply(self, [input.val(), settings, function(str){
            $(edit).html(str);
            edit.editing = false;
        }
    ]);
} else {

在您的成功处理程序中：

【讨论】：