data[undefined] sent from Editor extension
data[undefined] sent from Editor extension
rocketreading
Posts: 8Questions: 6Answers: 0
Hi there,
Could someone see what's wrong with the following code? Using the editor extension, on inlining a cell, the post is always data[undefined][field_name] and the response is always blank because of this.
Many thanks!
Jo
<!DOCTYPE html>
<html lang="en-us">
<head>
<!-- SmartAdmin Styles : Caution! DO NOT change the order -->
<link rel="stylesheet" type="text/css" media="screen" href="/css/smartadmin-production-plugins.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="/css/smartadmin-production.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="/css/smartadmin-skins.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.0.1/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="/packages/Editor/css/editor.dataTables.min.css">
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="display expenses" width="100%" data-id="1">
<thead>
<tr>
<th></th>
<th data-class="expand">Client</th>
<th>Test</th>
<th>Category</th>
</tr>
</thead>
</table>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.0.1/js/dataTables.select.min.js"></script>
<script src="/packages/Editor/js/dataTables.editor.js"></script>
<script type="text/javascript">
var editors = new Object;
$(document).ready(function () {
$('.expenses').each(function() {
var id = $(this).data('id');
editors[id] = new $.fn.dataTable.Editor( {
ajax: "/ajax/expenses/editor",
table: ".expenses[data-id='"+id+"']",
fields: [
{
"label": "Client",
"name": "company_id",
"type": "select",
"options": [
""
]
},
{
"label": "Test",
"name": "test_id",
"type": "select",
"options": [
""
]
},
{
"label": "Category",
"name": "category",
"type": "select",
"options": [
"Customer entertainment",
"Travel",
"Other"
]
}
],
formOptions: {
inline: {
onBlur: true
}
}
} );
$(this).on( 'click', 'tbody td:not(:first-child)', function () {
editors[id].inline( this, {
submitOnBlur: true
} );
} );
$(this).DataTable( {
dom: 'Bfrtip',
ajax: '/ajax/expense-groups/'+id,
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{
"data": "company_id"
},
{
"data": "test_id"
},
{
"data": "category"
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: 'create', editor: editors[id] },
{ extend: 'edit', editor: editors[id] },
{ extend: 'remove', editor: editors[id] }
]
} );
});
} );
</script>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
The
undefinedis because Editor doesn't know what the row's ID is (specifically this is used to track the primary key value so the server knows what row to edit, but it can also be the DOM id).If your table data were to contain
DT_RowIdfor each row it would be detected automatically. I guess you aren't so you need to useidSrcto tell Editor where to get the id from (i.e. the property name).Allan