DataTable Editable issue

touchmenot

Hello experts,
I am a newbie to DataTables and still learning. Here's the issue I am facing. I have configured DataTables to draw the table from a HTML table. The sorting and search works like a charm. Then I configured editable plugin to include the update functionality to the DataTable.

Now comes the problem. I have configured the ajax URL to return the updated value. From what I understand, the updated column value will take effect if it matches the string returned by the ajax call, if not its considered as an update error.

In my case, even though the return value / string of the ajax call match the updated column value, the column value changes back to the original and a pop up / alert is displayed with the returned value from the ajax call (as if its an error) with a "OK" button. The value of the edited column on the DataTable goes back to what it was prior to the update. Any thoughts why this would happen? I really appreciate any help.

Here's the javascript:
[code]
$(document).ready(function() {
$('#prospects').dataTable({
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aoColumnDefs": [
{"bSortable": false,"aTargets": [6] },
{"bSortable": false,"aTargets": [7] }
]
} ).makeEditable({
sUpdateURL: "myAccount/update"
});
[/code]

I am using Spring MVC as in the backend. Here's the controller / java code.

[code]
@RequestMapping(value={"myAccount/update"}, method=RequestMethod.POST)
public void updateAccount(@RequestParam("id") String prospectName, @RequestParam("value") String value, HttpServletResponse response){
try {
PrintWriter out = response.getWriter();
out.println(value.trim());
} catch (IOException e) {
e.printStackTrace();
}
}
[/code]

I thought this coud be due to the content type of the response and tried changing it to text/plain. That did not help. Please advice.

Thanx much.

allan

You need to use the DataTables API to update values of cells, rather than just writing to the DOM (which is what I assume is what is happening just now). fnUpdate is the function you want to update a single cell. DataTables has no listener on the DOM so it can't tell that a value has been changed, and thus update it's internal data store (which is keeps to make things much faster) - hence the need for the API.

Here is an example with jEditable using fnUpdate: http://datatables.net/release-datatables/examples/api/editable.html . Presumably the library you are using can provide similar hooks.

Allan

touchmenot

Allan,
Thank you very much for the quick response. I completely missed the part of updating the DataTables. I will follow the example and update the post. Thanx again.

touchmenot

Allan,
That worked out perfect. Just have a follow up question. Can you point me in the right direction on how to handle errors (not update the cell and say throw an alert) if the backend call fails?

touchmenot

Here's what I am thinking for error handling. Can I store the changed value of the updated cell and compare it with the value passed back from the Server? If it matches I update the cell with the value else, display an alert.

I am still trying to figure out how to get the updated value from the cell before its submitted and no luck. I know its something silly but would appreciate if some one can tell me if this is a good approach for error handling.

shree_rm

touchmenot,
Can you please share the code of integrating the Spring MVC and the Datatable Editing version.

Thanks.

touchmenot

Shree_rm,
Not sure if you are still looking for information. If so let me know. Will definitely try to help.

There's nothing special you have to do in Spring MVC to integrate with DataTables. All you have to do is generate the HTML table and hook it up with the DataTables API.

If you are using json to load the table, the controller method will have to be defined little differently. Let me know if you still need a sample.

Thanx