Question

I am using JEditable jquery plugin to update some data on my webpage. After the data is saved through the JEditable plugin on the server, I want to replace the old content in the container div with the new one which is actually different than the inserted data (application processed the data before saving it and adds some more information with it).

I have tried the below code to do the same, it works for the first time but once the data is replaced in the container div, the editable functionality is lost.

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

The Html code is:

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

Please suggest where am I doing wron? Thanks in advance.

Answer 1

The editable function needs a return value. and you cannot get one with an ajax function.

What I do is that I return some temporary value there in the meantime whilst I do my ajax function:

   $(".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
    }, ...