jQuery UI Widgets › Forums › DataTable › getCellValue 'null' Value on Inline Edit Delete
Tagged: Angular Data Table, data table, delete row, deleterow, getcellvalue, id, inline edit, jquery data table, jqxdatatable, row id, source
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 5 months ago.
-
Author
-
When the “delete” button is clicked in the code below, the getCellValue function is supposed to get the value of the ‘id’ field from the table. This value is then sent to an external script to delete the record from the database. This works for a few records, but then begins returning NULL as the ‘id’ of every field. If I re-load the page, the script beings working properly again but only for a few records at a time.
jQuery(document).ready(function () {
// prepare the data
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘id’, type: ‘number’ },
{ name: ‘lastName’, type: ‘string’ },
{ name: ‘firstName’, type: ‘string’ },
{ name: ‘jobTitle’, type: ‘string’ },
{ name: ‘phone’, type: ‘string’},
{ name: ‘office’, type: ‘string’ },
{ name: ’email’, type: ‘string’ }
],
url: “<?php echo LIBSTAFF__PLUGIN_URL; ?>data/results.json”,
deleteRow: function (rowID, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
var recordId = jQuery(“#dataTable”).jqxDataTable(‘getCellValue’, rowID, ‘id’);
alert(recordId);
jQuery.ajax({
method: ‘post’,
url: ‘<?php echo LIBSTAFF__PLUGIN_URL; ?>data/process.php’,
data: {
staffrow: ‘delete’,
data: recordId
},
cache: false,
success: function (data, status, xhr) {
// insert command is executed.
console.log(“success deleting record ID ” + recordId);
commit(true);
jQuery(‘#dataTable’).jqxDataTable(‘refresh’);},
error: function(jqXHR, textStatus, errorThrown)
{
console.log(“error deleting”);
commit(false);
}
});
}
};
var dataAdapter = new jQuery.jqx.dataAdapter(source,
{
loadComplete: function () {
console.log(“DATA ADAPTER load complete!”);
},
loadError: function(jqXHR, status, error)
{
console.log(status);
},
}
);
jQuery(“#dataTable”).jqxDataTable(
{
width: ‘95%’,
pageable: true,
sortable: true,
editable: true,
pagerButtonsCount: 10,
source: dataAdapter,
showToolbar: true,
altRows: true,
columnsResize: true,
ready: function()
{
// called when the DataTable is loaded.
console.log(“fertig”);
},
pagerButtonsCount: 8,
toolbarHeight: 35,
renderToolbar: function(toolBar)
{
…
var rowIndex = null;
jQuery(“#dataTable”).on(‘rowSelect’, function (event) {
var args = event.args;
rowIndex = args.index;
updateButtons(‘Select’);
});
jQuery(“#dataTable”).on(‘rowUnselect’, function (event) {
updateButtons(‘Unselect’);
});
jQuery(“#dataTable”).on(‘rowEndEdit’, function (event) {
updateButtons(‘End Edit’);
});
jQuery(“#dataTable”).on(‘rowBeginEdit’, function (event) {
updateButtons(‘Edit’);
});
jQuery(“#dataTable”).jqxDataTable(‘hideColumn’,’id’);…
deleteButton.click(function () {
if (!deleteButton.jqxButton(‘disabled’)) {
alert(rowIndex);
jQuery(“#dataTable”).jqxDataTable(‘deleteRow’, rowIndex);
updateButtons(‘delete’);
}
});
},
columns: [
{ text: ‘id’, dataField: ‘id’},
{ text: ‘Last Name’, dataField: ‘lastName’},
{ text: ‘First Name’, dataField: ‘firstName’},
{ text: ‘Job Title’, dataField: ‘jobTitle’},
{ text: ‘Phone’, dataField: ‘phone’},
{ text: ‘Office’, dataField: ‘office’},
{ text: ‘Email’, dataField: ’email’},
],
});
});Hello cpuzzuol,
If you set the source object’s id property to the ‘id’ datafield, the rowID argument of the deleteRow callback will be the same as the value of the row’s ‘id’ cell and you would not need to call getCellValue at all. Here is how to implement this approach:
var source = { dataType: "json", dataFields: [{ name: 'id', type: 'number' }, { name: 'lastName', type: 'string' }, { name: 'firstName', type: 'string' }, { name: 'jobTitle', type: 'string' }, { name: 'phone', type: 'string' }, { name: 'office', type: 'string' }, { name: 'email', type: 'string' }], id: 'id', url: "<?php echo LIBSTAFF__PLUGIN_URL; ?>data/results.json", deleteRow: function(rowID, commit) { // synchronize with the server – send delete command // call commit with parameter true if the synchronization with the server is successful // and with parameter false if the synchronization failed. alert(rowID); jQuery.ajax({ method: 'post', url: '<?php echo LIBSTAFF__PLUGIN_URL; ?>data/process.php', data: { staffrow: 'delete', data: rowID }, cache: false, success: function(data, status, xhr) { // insert command is executed. console.log("success deleting record ID " + rowID); commit(true); jQuery('#dataTable').jqxDataTable('refresh'); }, error: function(jqXHR, textStatus, errorThrown) { console.log("error deleting"); commit(false); } }); } };
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.