DataTable Editor onBlur: 'submit' odd behavior
DataTable Editor onBlur: 'submit' odd behavior
bbrindza
Posts: 300Questions: 69Answers: 1
I have 12 inline editable columns in my table. When I change the value in the first column and tab to next the column, the value in the first column is submitted and changed as expected.
However the in column two where the focus is, I change the value and tab to next the column, but the value is not changed.
Once I go back to the second column and try it again,it works. Any ides of why this could be happening?
editor = new $.fn.dataTable.Editor( {
ajax: {
type: 'POST',
url: 'ssp_getSalepersonByCustomerBillTo_BudgetData.php',
data: { locationCode:locationCode,
salespersonNumber: salespersonNumber,
customerNumber: customerNumber,
productNumber: productNumber
},
},
table: '#budgetRows_' + id,
fields: [
{
label: 'January Budget:',
name: 'BD$01'
}, {
label: 'February Budget:',
name: 'BD$02'
}, {
label: 'March Budget:',
name: 'BD$03'
}, {
label: 'April Budget:',
name: 'BD$04'
}, {
label: 'May Budget:',
name: 'BD$05'
}, {
label: 'June Budget:',
name: 'BD$06'
}, {
label: 'July Budget:',
name: 'BD$07'
}, {
label: 'August Budget:',
name: 'BD$08'
}, {
label: 'September Budget:',
name: 'BD$09'
}, {
label: 'October Budget:',
name: 'BD$10'
}, {
label: 'November Budget:',
name: 'BD$11'
}, {
label: 'December Budget:',
name: 'BD$12'
}
]
} );
// Activate an inline edit on click of a table cell
$('#budgetRows_' + id).on('click', 'tbody td:not(:first-child):not(\'.markCompleteButton\')',
function (e) {
editor.inline( childTable3.cell( this ).index(), {
onBlur: 'submit',
submit: 'allIfChanged'
});
});
childTable3 = $('#budgetRows_' + id).DataTable({
dom: 't',
ajax: {
type: 'POST',
url: 'ssp_getSalepersonByCustomerBillTo_BudgetData.php',
data: { locationCode:locationCode,
salespersonNumber: salespersonNumber,
customerNumber: customerNumber,
productNumber: productNumber
},
},
serverSide: true,
order: [ 1, 'asc' ],
keys: {
columns: ':not(:first-child, .markCompleteButton)',
keys: [ 9 ],
editor: editor,
editOnFocus: true
},
columns: [
{
data: null,
searchable: false,
orderable: false,
render: function ( data, type, row ) {
return '<td><b>Next Year Budget</b></td>';
}
},
{ data: 'BD$01'},
{ data: 'BD$02'},
{ data: 'BD$03'},
{ data: 'BD$04'},
{ data: 'BD$05'},
{ data: 'BD$06'},
{ data: 'BD$07'},
{ data: 'BD$08'},
{ data: 'BD$09'},
{ data: 'BD$10'},
{ data: 'BD$11'},
{ data: 'BD$12'},
// ** Mark Completed Button
{
data: null,
searchable: false,
orderable: false,
className: 'markCompleteButton',
render: function ( data, type, full, meta ) {
if( full.SYNCFL == 'N'){
return '<button id="markBudgetRecordCompletedButon" class="btn btn-primary btn-xs" onclick="showMarkBudgetRecordCompletedModal(\''+ full.PKLOC +'\', \''+ full.PKSLNO +'\', \''+ full.PKCUST +'\', \''+ full.PKPROD +'\' )">Mark Completed</button>';
}else{
return '';
}
}
},
],
columnDefs: [
{ targets: "_all" , className: "text-center" },
{ targets: "_all" , width: 100 },
//{ targets: 13, className: "text-center" },
{ targets: "_all", orderable: false}
],
select: {
style: 'os',
selector: 'td:first-child'
},
} );
This question has accepted answers - jump to:
Answers
Are you able to give me a link to a page showing the issue? I'm not immediately recalling having encountered this issue before I'm afraid. Editor stores the values of the row when editing starts, so it can check to see if a value has changed. It sounds like I'd need to debug that part of the code in your application environment as it seems to be working correctly in the examples.
Allan
Hi Allan,
Unfortunately the page is behind a firewall. I can do some debugging on my end if you can provide my with the steps in the ssp class I can use to see what the issue may be.
The first thing would be to see the data being submitted and also the data being returned from the server please? The browser's Network Inspector will show that information as the request and response.
Allan
Hi Allan,
The DB2 table columns are formatted as Numeric 7,1 and contains the data 0.0, because the Default Value is defined as 0.
When the page load it brings in the budget rows, which display the data as .0
** Data when first loaded from ssp
It works on the 1st column when I change the inline value...
** Data sent from inline value change (3.6)
** Data return when key tab to 2nd column
From the 2nd column I typed in 8.4 and key tabbed to 3rd column. The ssp_getSalepersonByCustomerBillTo_BudgetData_Template.php did not fire in the Chrome Network display. It appears that it is a front-end issues, seeing the ssp did not run.
The DT_RowId looks odd as well. Based on my ssp it should be
not
It is putting
b10a429ebetween key values which is columnsThoughts?
Hi,
Thanks for this information.
That actually looks like the response from the server, rather than what is sent - since it has
debugSqlin it, and is JSON rather than HTTP parameters (unless you are usingajax.datato send it as JSON?).Yes, this is correct and expected. Editor adds a hash to separate the primary key values. It does that to protect against the order of the primary keys changing - imagine for example you had a key made up of
1and2as compound key values. If the dev changed the order in the script and the client didn't refresh, the wrong data would be updated!This is how Editor does that. It's server-side processing will automatically add that in.
Based on that, I'm afraid I would need to be able to debug the page. If it is a logic issue in how the data change is detected, it is going to be buried deep in the Editor code.
Allan
What do you mean by "buried deep in the Editor code"? Are you referring to my script?
or the actual dataTables.editor.min.js? My data is ajax sourced not in the HTML. I could try to put together live.datatables.net example and see if I get the same result if I embed that data in the HTML. Other then that I would need you to access the application through a secured connection some how.
Here is the solution..
I removed this from my script
This code was conflicting with this code...
Thanks for the update! Good to talk to you earlier.
Allan