Always retrieving old value (but not new value) from editable DataTable during onblur

Question

I am currently trying to work on creating a DataTable that has editable columns. The best example I have been able to find is located on DataTables own website: http://www.datatables.net/release-datatables/examples/api/editable.html.

Everything works perfectly except the only issue I have now is somehow capturing the new value that the user entered and, onblur, send the new value over server side. The value that is sent over is always the original value and not the new value the user has entered in. Note: I use a handler.ashx handler that retrieves the new value on server side.

Here is my code to display the DataTable:

$(document).ready(function() {

    var oTable = $('#example').dataTable({
        "sAjaxSource": "displayTable.ashx",
        "aoColumns": [
                { "sTitle": "examCode"},
                { "sTitle": "division" },
            ],
        "fnDrawCallback": function() {
            $('td').editable( 'handler.ashx', {
                "submitdata": function ( value, settings ) {
                    return {
                        examCode: $(this).parent().find(":first").text(),
                        columnPosition: oTable.fnGetPosition( this )[2],
                        newValue: value
                    };
                },
                onblur    : "submit",
            } );
      }


    });
});

Here is my code for handler.ashx:

public class Handler : IHttpHandler {

    public string editExamCode(HttpContext context)
    {
        String newValue = context.Request.Form.Get("newValue");
    }
}

Notice that onblur I "submit" and the value is passed over to the newValue variable? What is always passed in the value is always the original value and not the new value that the user has entered.

Is there a way around this?

Thanks - any help would be appreciated!

Answer 1

I don't think you need the newValue: value at all.

Try this code:

$(document).ready(function() {

    var oTable = $('#example').dataTable({
        "sAjaxSource": "displayTable.ashx",
        "aoColumns": [
                { "sTitle": "examCode"},
                { "sTitle": "division" },
            ],
        "fnDrawCallback": function() {
            $('td').editable( 'handler.ashx', {
                "submitdata": function ( value, settings ) {
                    return {
                        examCode: $(this).parent().find(":first").text(),
                        columnPosition: oTable.fnGetPosition( this )[2]
                    };
                },
                onblur    : "submit",
            } );
      }


    });
});

And then the handler would just look for the "value" variable:

public class Handler : IHttpHandler {

    public string editExamCode(HttpContext context)
    {
        String newValue = context.Request.Form.Get("value");
    }
}