fnUpdate in callback option of jEditable

Editable textbox will not disappear when losing focus

by chrisloughnane

HTML

<script src="http://www.datatables.net/release-datatables/examples/examples_support/jquery.jeditable.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div>
    <table id="Sample">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

CSS

#Sample td{
    width: 200px;
    
    
}
.center{
   width: 200px;
}

JavaScript

var row = {
    "0": "12345",
        "1": "18/04/2013",
        "2": "Datatables",
        "3": "123.00"
}

var settings = {
    "aaData": [row, row, row, row, row, row, row, row, row],
        "aoColumns": [{
        "sClass": "center editable"
    }, 
    {
        "sClass": "center editable"
    }, 
    {
        "sClass": "center editable"
    },
    {
        "sClass": "center"
    }
    ],
        "bPaginate": false,
        "bInfo": false,
        "bSort": false,
        "bFilter": false,
        "asStripeClasses": ['odd', 'even'],
        "fnDrawCallback": function () {
        $('#Sample tbody td.editable').editable(function (value, settings) {
            return (value);
        }, {
            onblur: 'submit',
            callback: function (value, settings) {
                var aPos = oTable.fnGetPosition(this);
                oTable.fnUpdate(value, aPos[0], aPos[1]);//If I comment out this line, the problem will gone.
                alert(value+" "+settings);
            }
        });
    }
}

var oTable;
$(function () {
    oTable = $('#Sample').dataTable(settings);
});