0

我正在使用 jEditable 允许用户更正表格中的电话号码和电子邮件地址，并在他们按 Enter 时更新数据库。问题是从服务器返回的响应只是被客户端解释为文本，而实际上我想要执行一些 javascript 代码。

jEditable 的工作方式是您不显眼地将“可编辑”操作附加到 DOM 元素，这非常有效。观察客户端使用 tcpdump 向服务器发送的内容，我可以看到 POST 是 html，带有 X-Requested-With: XMLHttpRequest; 从服务器返回的是 Content-Type: text/javascript。

有问题的 Rails 控制器操作是 verify_email，因为我的所有验证逻辑都可以正常工作，但客户端 javascript 不是，所以我将控制器操作缩短为：

def verify_email
  respond_to do|format|
    format.js
  end
end

同样将 verify_email.js.erb 简化为

$(function(){ console.log("hello from verify_email callback")});

您可能认为我会在浏览器控制台中得到一个愉快的问候，但不是，而是 td 的值更改为文本 '$(function(){ console.log("hello from verify_email callback")}) ;'

将 jEditable 功能附加到表数据是按类完成的：

$(function() {
    $('.email')
        .editable('http://newserver.us.org:3001/directory/review/verify_email', {
            indicator : '<%= image_tag "wait18trans.gif", :title => "wait" %>',
            tooltip : "Click to edit...",
            }
        })
})

我只是看不到错误在哪里。我正在与不使用 jEditable 的控件进行比较：我有一个在更改时发布的复选框：

$(function() {
    $('.checkmark').change(function() {
            $.post("http://newserver.us.org:3001/directory/review/checkmark",
            {"id" : $(this).attr("id")})
        });
});

当我将相同的控制台日志消息放入 checkmark.js.erb 时，我得到了愉快的问候。在电线上，接头看起来是一样的。

我目前的想法是 jEditable 调整 DOM 以插入文本输入字段，然后将其删除，这以某种方式干扰了 javascript 响应？！？

我向 jEditable 添加了一个回调，以查看返回的内容，如下所示：

$(function() {
    $('.email')
        .editable('http://newserver.us.org:3001/directory/review/verify_email', {
            indicator : '<%= image_tag "wait18trans.gif", :title => "wait" %>',
            tooltip : "Click to edit...",
            callback : function(value, settings) {
                console.log(this);
                console.log(value);
                console.log(settings);
            }
        })
})

这会产生以下控制台日志记录：

[Log] <td class=​"email" id=​"2-3--1347-597" title=​"Click to edit...">​$(function(){ console.log("hello from verify_email callback")});
[Log] $(function(){ console.log("hello from verify_email callback")});​
[Log] Object
ajaxoptions: Object
autoheight: true
autowidth: true
callback: function (value, settings) {
event: "click.editable"
height: 35
id: "id"
indicator: "<img alt="Wait18trans" src="/directory/images/wait18trans.gif" title="wait" />"
loaddata: Object
loadtext: "Loading..."
loadtype: "GET"
name: "value"
onblur: "cancel"
placeholder: ""
submitdata: Object
target: "http://newserver.us.org:3001/directory/review/verify_email"
tooltip: "Click to edit..."
type: "text"
width: 202
__proto__: Object

只是value一串javascript没有帮助。

最终我想要 javascript 做的是更新 td 的 id。所以也许我需要在 jEditable 帖子之前获取对 td 的引用，用于在返回时找到正确的元素？

4

1 回答 1

0

看来，rails 控制台日志为我提供了解决此问题所需的信息。

未使用 jEditible 的复选框以这种方式被 rails 看到：

Processing by ReviewController#checkbox as */*

我的电子邮件 tds 是这样被 rails 看到的：

Processing by ReviewController#verify_email as HTML

这有点可以理解，为什么我发回的所有内容都被简单地解释为 HTML（即使我只有一个 responds_to |format| format.js...）

因此，在将 jEditable 分配给“电子邮件”类的元素时，我添加了 dataType 的 ajaxoption ：“”（JQuery 文档说 dataType 是智能的...... jEditable 将其设置为 HTML）

$(function() {
    $('.email')
        .editable('http://newserver.us.org:3001/directory/review/verify_email', {
            indicator : '<%= image_tag "wait18trans.gif", :title => "wait" %>',
            tooltip : "Click to edit...",
            ajaxoptions : { dataType:""}
        })
})

现在一切都按我的预期工作！

于 2013-09-07T16:49:45.323 回答