Hello,
I am using the editor as inline and as a popup to edit consecutive rows. I would like to refresh the table when the user closes the popup window, but I am not able to get the close event. When I tried "editor.on('close') it executes the refresh just when I open the popup window by pressing the "edit" button. I am also having problems when commenting out the "create" button and get this error "node: inst.s.buttons[ selector ].node".
Any help will be appreciate, thank you and here is my code:
`
var editor; // use a global for the submit and return data rendering
var parKualiDepositID;
var parMerchantConnectGroupID;
var parReconcileNote;
var parReconcileBy;
var parMerchantConnectID;
var param;
var table;
$(document).ready( function() {
var adminID = $('#adminid').val();
editor = new $.fn.dataTable.Editor( {
ajax: {
url: "components/merchantDAO.cfc?method=getMerchant&returnformat=json",
data: function ( d ) {
d.RecordType = 0;
},
},
table: "#tbParticipants",
idSrc: 'merchantconnectid',
fields: [
{
label: "Credit Card",
name: "cardnumber",
enabled: false
},
{
label: "Kuali Deposit ID:",
name: "kualidepositid"
}, {
label: "Group Name:",
name: "groupname",
type: "selectize",
placeholder: "Select a Group",
},
{
label: "Reconcile Note:",
name: "reconcilenote"
}
],
formOptions: {
main: {
submit: 'changed' // will submit only if there are changes
}
}
} );
// getGroups function will populate "Group Name" dropdown by passing field name and getting data from DAO
getGroups( editor.field('groupname') );
function getGroups( field ){
var aListObject = new Array();
$.ajax ({
type: "GET",
async: false,
url: "components/merchantDAO.cfc?method=getMerchantConnectGroup&returnformat=json",
success: function (options) {
var obj = JSON.parse(options);
for (var i = 0; i < obj.options.length; i++) {
item = {};
item["label"] = obj.options[i].groupname;
item["value"] = obj.options[i].merchantconnectgroupid;
aListObject.push(item);
}
field.update( aListObject );
}
});
};
// Disable "Credit Card" field on edit. We just want to show it to the user
editor.field( 'cardnumber').disable();
// Activate an inline edit on click of a table cell
$('#tbParticipants').on( 'click', 'tbody td', function (e) {
editor.inline( this, { submitOnBlur: true } );
} );
// Handle data before submit edit (update)
editor.on( 'preSubmit', function ( e, data, action ) {
var KualiDepositID = editor.field( 'kualidepositid' );
var MerchantConnectGroupID = editor.field( 'groupname' );
var ReconcileNote = editor.field( 'reconcilenote' );
parReconcileBy = adminID;
// loop to get key (id) and if processing many edits
$.each( data.data, function ( key, value ) {
parMerchantConnectID = key;
parKualiDepositID = data.data[key].kualidepositid;
parMerchantConnectGroupID = data.data[key].groupname;
parReconcileNote = data.data[key].reconcilenote;
});
// Build parameters for component call
param = 'MerchantConnectID=' + parMerchantConnectID + '&ReconcileBy=' + parReconcileBy;
if (KualiDepositID.val()){
param = param + '&KualiDepositID=' + parKualiDepositID;
}
if (MerchantConnectGroupID.val()){
param = param + '&MerchantConnectGroupID=' + parMerchantConnectGroupID;
}
if (ReconcileNote.val()) {
param = param + '&ReconcileNote=' + parReconcileNote;
}
// Execute update
$.ajax ({
url: "components/merchantDAO.cfc?method=updateMerchantConnectReconcile&returnformat=json",
method: "POST",
data: param,
success: function(result){
}
});
}); // End of 'preSubmit'
editor.on('close', function(e) {
alert("will close");
// table.ajax.reload();
});
// Buttons array definition to create previous, save and next buttons in
// an Editor form
var backNext = [
{
label: "<",
fn: function (e) {
// On submit, find the currently selected row and select the previous one
this.submit( function () {
var indexes = table.rows( {search: 'applied'} ).indexes();
var currentIndex = table.row( {selected: true} ).index();
var currentPosition = indexes.indexOf( currentIndex );
if ( currentPosition > 0 ) {
table.row( currentIndex ).deselect();
table.row( indexes[ currentPosition-1 ] ).select();
}
// Trigger editing through the button
table.button( 1 ).trigger();
}, null, null, false );
}
},
'Save',
{
label: ">",
fn: function (e) {
// On submit, find the currently selected row and select the next one
this.submit( function () {
var indexes = table.rows( {search: 'applied'} ).indexes();
var currentIndex = table.row( {selected: true} ).index();
var currentPosition = indexes.indexOf( currentIndex );
if ( currentPosition < indexes.length-1 ) {
table.row( currentIndex ).deselect();
table.row( indexes[ currentPosition+1 ] ).select();
}
// Trigger editing through the button
table.button( 1 ).trigger();
}, null, null, false );
}
}
];
table = $('#tbParticipants').DataTable( {
responsive: true,
bPaginate: false,
dom: "Bfrtip",
bProcessing: true,
bServerSide: false,
bAutoWidth: false,
bJQueryUI: true,
//sPaginationType: "full_numbers",
ajax: {
url: "components/merchantDAO.cfc?method=getMerchant&returnformat=json",
data: function ( d ) {
d.RecordType = 0;
}
},
columns: [
{ // Responsive control column
data: null,
defaultContent: '',
className: 'control',
orderable: false
},
{ data: "merchantconnectid" },
{ data: "cardnumber" },
{ data: "cardtype" },
{ data: "itemamount", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
{ data: "entrymethod" },
{ data: "authcode" },
{
/* when passing null to mData we pass the whole row so we can use different fields to format display */
data: null,
"mRender": function ( data, type, full, meta ){
var displayDate =new Date(data.batchdate);
return displayDate.toLocaleDateString();
}
},
{ data: "transdate",},
{ data: "transtime" },
{ data: "refnumber" },
{ data: "roctext" },
{ data: "kualidepositid",
render: function ( data, type, row ){
if ( type === 'display' ) {
//var numberRenderer = $.fn.dataTable.render.number( ',', '.', 0, '$' ).display;
return data + ' <i class="fa fa-pencil"/>';
}
return data;
}
},
{ data: "groupname",
render: function ( data, type, row ){
if ( type === 'display' ) {
//var numberRenderer = $.fn.dataTable.render.number( ',', '.', 0, '$' ).display;
return data + ' <i class="fa fa-pencil"/>';
}
return data;
}
},
{ data: "reconcilenote",
render: function ( data, type, row ){
if ( type === 'display' ) {
//var numberRenderer = $.fn.dataTable.render.number( ',', '.', 0, '$' ).display;
return data + ' <i class="fa fa-pencil"/>';
}
return data;
}
},
{ data: "reconcileby"}
],
select: true,
buttons: [
{ extend: "create", editor: editor, enabled: false },
{
extend: 'selected',
text: 'Edit',
action: function () {
var indexes = table.rows( {selected: true} ).indexes();
editor.edit( indexes, {
title: 'Edit',
buttons: indexes.length === 1 ?
backNext :
'Save'
} );
}
}
// ,
// { extend: "remove", editor: editor, enabled: false }
],
keys: {
columns: ':not(:first-child)',
keys: [ 9 ] // Tab key
}
} ); // Ending datatable
// Inline editing on tab focus
table.on( 'key-focus', function ( e, datatable, cell ) {
editor.inline( cell.index() );
} );
} ); // Ending document ready
`