Changing page loses action buttons on record row
Changing page loses action buttons on record row
mikepfly2
Posts: 17Questions: 7Answers: 0
I have a datatable that shows a list of upcoming deliveries. Each delivery row has "action buttons" to edit, cancel, approve the delivery. The buttons work fine when databables first loads and shows the first 10 delivery records. When I page over to the next 10 records (by clicking next or a specific page) the action buttons don't fire when clicked. I'm sure this is a callback issue but can't seem to figure it out. Any help will be appreciated.
$(document).ready(function () {
reviewdeliveryrequest(); //creates datatable
});
function reviewdeliveryrequest() {
//Gets data for status table
var mq = window.matchMedia("(max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait)");
if (mq.matches) { //small screen
var scrollY = false;
var scrollX = false;
var pagelength = 10;
} else {
var scrollY = '400';
var scrollX = true;
var pagelength = 250;
}
$('.ajax-loader').css("visibility", "visible");
var papersize = 'LETTER';
$.ajax({
type: "POST",
url: "./command/homepage_events.php?action=deliverystatus",
data: 0,
async: true,
dataType: 'json',
success: function (result) {
if (result.success) {
if (result.pendinghtml == false) {
$('#reviewrequesttable').html("<h3>No deliveries to review</h3>");
} else {
$('#reviewrequesttable').html(result.pendinghtml);
$.fn.dataTable.moment('M/D/YY dddd');//needed to sort date column
$.fn.dataTable.moment('h:mm a');//needed to sort date column
$.fn.dataTable.moment('M/D/YY');
var createstamp = moment().format('M/D/YY h:mm a');
var projectname = $('#projectname').text();
var tblstatus = $('#tblreviewrequests').DataTable({
ordering: true,
info: true,
paging: true,
pagingType: 'full_numbers',
pageLength: 1, //pagelength,
lengthMenu: [ [10, 25, 50, 100, 250, -1], [10, 25, 50, 100, 250, "All"] ],
responsive: false,
scrollY: scrollY,
scrollX: scrollX,
order: [[2, "desc"], [3, "desc"]],
dom: 'BifrtlpB',
buttons: [
{extend: 'excel', text: 'Excel', messageTop: 'Created: ' + createstamp, title: projectname, exportOptions: {rows: ':visible', columns: ':visible'}},
{extend: 'pdfHtml5', text: 'PDF', orientation: 'landscape',
customize: function (doc) {
doc.pageMargins = [20, 20, -10, 20 ]; //LTRB
var colCount = new Array();
$('#tblreviewrequests').find('tbody tr:first-child td').each(function () {
if ($(this).attr('colspan')) {
for (var i = 1; i <= $(this).attr('colspan'); $i++) {
colCount.push('*');
}
} else {
colCount.push('*');
}
});
doc.content[2].table.widths = colCount;
}, pageSize: papersize, messageTop: 'Created: ' + createstamp, title: projectname, exportOptions: {rows: ':visible', columns: ':visible.exportable'}}
],
"columnDefs": [
{'orderable': false, 'targets': 14},
]
});
$('a.toggle-vis').on('click', function (e) {
e.preventDefault();
// Get the column API object
var column = tblstatus.column($(this).attr('data-column'));
// Toggle the visibility
column.visible(!column.visible());
});
//Use to show sub company by default
var isadmin = $('#isadmin').val();
var isgate = $('#isgate').val();
var company_id = $('#company_id').val();
if (isadmin === 'false' && isgate == 'false') {
$('#searchCompany').val(company_id);
}
filterStatusTable(); //defaults to only showing events from today forward.
$(".editrequest").click(function (e) {
e.preventDefault();
var isadmin = $('#isadmin').val();
var $event_id = $(this).parents('tr').attr('id');
var $event_id = $event_id.replace('pending_', '');
if (isadmin == "false") {
var event_date = $(this).parents('tr').find('.ddate').text();
var datenoday = event_date.split(" ")[0];
var datecheck = (moment(datenoday, "M/D/YY").format('M/D/YY'));
var in48 = (moment().add(48, 'hours')).format('M/D/YY');
if (moment(datecheck, "M/D/YY").isBefore(moment(moment(), "M/D/YY"))) {
bootbox.alert("Deliveries scheduled for today or a date in the past cannot be edited.");
return;
}
}
var href = FULLCAL_URL + '/index.php?action=revise&r=' + $event_id;
window.location.href = href;
//approvedeny($event_id,1);
});
$(".cancelrequest").click(function (e) {
e.preventDefault();
var isadmin = $('#isadmin').val();
var $event_id = $(this).parents('tr').attr('id');
var $event_id = $event_id.replace('pending_', '');
var event_date = $(this).parents('tr').find('.ddate').text();
var future = (moment().add(48, 'hours')).format('YYYY-MM-DD');
var ed = moment(event_date, 'M/D/YY ddd').format('YYYY-MM-DD');
if (ed <= future) {
bootbox.alert("Deliveries scheduled in the next 48 hours cannot be cancelled.");
return;
}
;
bootbox.dialog("Are you sure you want to cancel this delivery?", [{
"label": "Yes, Cancel Delivery",
"class": "btn-danger",
"callback": function () {
$.ajax({
type: "POST",
url: "./command/homepage_events.php?action=cancel",
async: true,
data: {event_id: $event_id},
//, company_id: $company
dataType: 'json',
success: function (result) {
if (result.success) {
reviewdeliveryrequest();
} else {
alert("Error with cancelling.");
}
}
});
}
}, {
"label": "No, Go Back",
"class": "btn"
}]);
});
$(".approverequest").click(function (e) {
e.preventDefault();
var $event_id = $(this).parents('tr').find('.pendingChk').val();
//alert('approve ' + $event_id);
approvedenySingle($event_id, 1);
});
$(".denyrequest").click(function (e) {
e.preventDefault();
var $event_id = $(this).parents('tr').find('.pendingChk').val();
//alert('deny ' + $event_id);
approvedenySingle($event_id, -1);
});
$("#batchapproveT,#batchapproveB").click(function (e) {
e.preventDefault();
var $selected_events = $('.pendingChk:checkbox:checked');
if ($selected_events.length === 0) {
//alert("Nothing selected to approve.");
bootbox.alert("Nothing selected to approve.<br><br>Check some boxes and try again.");
return;
}
//alert($selected_events);
approvedeny_batch($selected_events, 1);
});
$("#batchdenyT,#batchdenyB").click(function (e) {
e.preventDefault();
var $selected_events = $('.pendingChk:checkbox:checked');
if ($selected_events.length === 0) {
//alert("Nothing selected to deny.");
bootbox.alert("Nothing selected to deny.<br><br>Check some boxes and try again.");
return;
}
approvedeny_batch($selected_events, -1);
});
$(".recorddelivery").click(function (e) {
e.preventDefault();
var $event_id = $(this).parents('tr').attr('id');
var $event_id = $event_id.replace('pending_', '');
var $nonbadged = $(this).parents('tr').find('.badged').text() == 'N';
if ($nonbadged) {
bootbox.alert('<div class="alert alert-danger" role="alert">Delivery occupant(s) not certified to be onsite!<br><br>Send them to the Marshalling area!</div>', function () {
bootbox.dialog("Record this delivery as received at the gate?", [{
"label": "Yes, Record Delivery",
"class": "btn-primary",
"callback": function () {
recorddelivery($event_id);
}
}, {
"label": "No, Go Back",
"class": "btn"
}]);
;
});
} else {
bootbox.dialog("Record this delivery as received at the gate?", [{
"label": "Yes, Record Delivery",
"class": "btn-primary",
"callback": function () {
recorddelivery($event_id);
}
}, {
"label": "No, Go Back",
"class": "btn"
}]);
}
});
$("#ckbCheckAllT,#ckbCheckAllB").click(function () {
//$(".pendingChk").prop('checked', $(this).prop('checked'));
$(".pendingChk:visible").prop('checked', $(this).prop('checked'));
});
}
$('.ajax-loader').css("visibility", "hidden");
} else {
alert("Error.");
}
}
});
}
This discussion has been closed.
Answers
This FAQ should help. You need to use delegated events.
Kevin
I think I figured it out. I but all my code relating to the action buttons into it's own "RDBUTTON" function then added
kthorngren, I think I was typing my reply when your answer came through. I'll review the FAQ. Thanks.
Is using the drawCallback function a wrong approach?