Empty json in postSubmit editor
Empty json in postSubmit editor
info@memetic.it
Posts: 3Questions: 0Answers: 0
Hi, we are experiencing a strange behaviour using the inline editor feature.
We have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css" rel="stylesheet" type="text/css"/>
<link href="editor.dataTables.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="display" id="data-table">
<thead>
<tr>
<td>Id</td>
<td>Name</td>
<td>Goals</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="dataTables.editor.js"></script>
<script type="text/javascript">
var editor;
var ApiUrl = 'http://192.168.150.188:8084/api';
var ajaxBase = {
processData: "false",
contentType: "application/json; charset=utf-8",
data: function ( d ) {
return JSON.stringify(d.data)
}
};
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
legacyAjax: true,
table: "#data-table",
fields: [{name: "name"}],
idSrc: "id",
ajax: {
edit: $.extend(true, {}, ajaxBase, {
type: 'PUT',
url: ApiUrl + '/ping/_id_'
})
}
});
$('#data-table').on('click', 'tbody td.editable', function (e) {
editor.inline(this);
});
$("#data-table").DataTable({
rowId: "id",
ajax: {
"url": ApiUrl + "/ping"
},
columns: [
{data: "id"},
{data: "name", className: 'editable'},
{data: "goals", className: 'editable'},
],
});
editor.on('postSubmit', function (e, json, data, action) {
console.log("json", json);
});
});
</script>
</body>
</html>
With this response from the server when we edit a field :
{
"data":
[
{"goals":"0","name":"theName","id":1}
],
"fieldErrors": [],
"error": ""
}
The result of console.log in the postSubmit is:
{
"data":
[],
"fieldErrors": [],
"error": ""
}
while the response of the server (checked on the console) is filled.
Why data is empty?
If we change the response in:
{"goals":"0","name":"theName","id":1}
and set manually the data property of the postSubmit json object with:
json.data = [json]
everything is working but this is not the right way because it's a self referencing object
Thanks
This discussion has been closed.
Replies
That's odd!I'm not sure why that would be happening I'm afraid. Can you give me a link to the page so I can debug it please.
Allan
Hi Allan, here you are the example
plunker
Thank you
Thank you! So the issue here is being caused by the backwards compatibility of the
legacyAjaxoption.In the Editor source you will find the following code:
That should actually be:
i.e. don't overwrite the data parameter if it was provided. If you make that change to your local Editor code that will resolve the problem. I'll make sure that this change is in the next release!
Thanks,
Allan
It works!! Thanks a lot