使用JEditable设置自定义响应

时间:2011-11-08 16:39:31

标签: jquery jeditable

我正在使用JEditable jquery插件来更新我网页上的一些数据。通过服务器上的JEditable插件保存数据之后,我想用新的内容替换容器div中的旧内容,实际上与插入的数据不同(应用程序在保存之前处理了数据并添加了一些更多信息。它)。

我已经尝试过以下代码来做同样的事情,它第一次工作但是一旦在容器div中替换了数据,就会丢失可编辑的功能。

$(".editableComments").editable( function(value, settings) {
            selectedId = $(this).attr("id");
            $.ajax({
                url:'ajaxApproveRequests',
                type:'post',
                data:{
                        requestType: "Trans",
                        idList : $(this).attr("id"),
                        comment:  value
                    },
                success: function(data) {
                    if (data != "Error")
                        {
                            $("#"+selectedId).html(data);
                        }
                },
                error: function(req) {
                    alert("Error in request. Please try again later.");
                }
            });
        },
        {
            indicator : "Saving...",
            type   : 'textarea',
            submit : '<input type="button" id="okBtn" value="Ok" onMouseOver="rollOnAutoButton(this)" onMouseOut="rollOffAutoButton(this)" class="autobtn" >',
            cancel : '<input type="button" id="cancelBtn"  value="Cancel" onMouseOver="rollOnAutoButton(this)" onMouseOut="rollOffAutoButton(this)" class="autobtn" >',
            cssclass : "editableArea",
            rows: 5,
            cols: 25,
            onblur    : "ignore"
        }); 

Html代码是:

<div class="editableComments">some data</div>

请告诉我在哪里做wron?提前谢谢。

1 个答案:

答案 0 :(得分:11)

可编辑功能需要返回值。你不能得到一个具有ajax功能的人。

我做的是在此期间我返回一些临时值,同时执行我的ajax功能:

   $(".editableComments").editable( function(value, settings) {
        selectedId = $(this).attr("id");
        $.ajax({
            url:'ajaxApproveRequests',
            type:'post',
            data:{
                    requestType: "Trans",
                    idList : $(this).attr("id"),
                    comment:  value
                },
            success: function(data) {
                if (data != "Error")
                    {
                        $("#"+selectedId).html(data);
                    }
            },
            error: function(req) {
                alert("Error in request. Please try again later.");
            }
        });
        return value; //need the return
    }, ...