Tablesorter editable, howto enable edit for a newly added row

Question

I use tablesorter with editable and filter plugin. Furthermore, I use the pager (don't think it relevant).

Now I have a button on my page which opens a form to add a new row to the table. However I first update the database using an ajax call, like this:

function ajaxUpdateDb(action, record) {

var postdata = JSON.stringify(
{
    "Table": $(".tablesorter").attr("id"),
    "Action": action,
    "Record": record
});

try {
    $.ajax({
        type: "POST",
        url: "../ajax/UpdateData.ashx",
        cache: false,
        data: postdata,
        dataType: "json",
        success: getSuccess,
        error: getFail,
        async: true
    });
} catch (e) {
    displayMessage(e.message, "alert alert-danger");
}

function getSuccess(data) {
    $(".tablesorter").trigger('cancel');

    if (data && data.Success) {
        record.ID = data.Id;
        displayMessage(data.Message, "label label-success");
        updateTable(action, record);
    } else if (data) {
        displayMessage(data.Message, "alert alert-danger");
    } else {
        displayMessage("operation failed, unknwon error", "alert alert-danger");
    }
};

function getFail(jqXhr) {
    document.write(jqXhr.responseText);
};
}

, then, on return of the ajax call I actually add the row to the html table, like so:

$('.tablesorter tbody').append(toHtml(record));
$('.tablesorter').trigger('update', true);

The toHtml(record) function creates the html code for the row with an unique id (checked that).

The row is correctly added to the table, filtering and sorting works, but... the row is not editable, the other rows still are editable.

How can I make my newly added row editable?

Answer 1

The solution for me was to define the editable columns as an array instead of text: editable_columns: [0, 1, 2, 3, 4]