Hey all, I am having a problem. When my user selects a datatables row, it populates variables (in external quill instances and such). If the user selects another row it will overwrite the variables. I have set up a confirm box, to prompt the user. The problem is once cancel is pressed, the new record is still highlighted. If I do this 3 times, two records are highlighted even when my select is set to single. Any suggestions? Here is relevant code:
<script>
var editor; // use a global for the submit and return data rendering in the examples
var savedFirst; // prevents user from sending to printer unless document is saved
$(document).ready(function() {
var table2 = $('#editTable').DataTable({
pageLength: 5,
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'All']],
ajax: 'ajaxPhoneLogs.php',
processing: true,
language: {
processing: '<i class="fa-duotone fa-gear fa-spin"></i> Data Loading...',
searchBuilder: {
button: '<i class="fa-solid fa-magnifying-glass-arrow-right"></i> Refine Search',
title: 'Choose Filter Options'
}
},
buttons: [
'<i class="fa-solid fa-magnifying-glass-arrow-right"></i> Refine Search'
],
columns: [
{ data: 'phonelogs.id', visible: false, searchable: false },
{ data: 'phonelogs.CR_ID', visible: false },
{ data: "phonelogs.callDateTime", render: DataTable.render.datetime('M/D/YYYY, h:mm:ss a') },
{ data: 'calltypes.name' },
{
data: null, render: function (data, type, row) {
return data.form.FirstName + ' ' + data.form.LastName;
}, searchable: false
},
{ data: "phonelogs.callNotes", visible: false },
{ data: "phonelogs.greeting", visible: false, searchable: false },
{ data: "phonelogs.poled1", visible: false, searchable: false },
{ data: "phonelogs.poled2", visible: false, searchable: false },
{ data: "phonelogs.responseBody", visible: false, searchable: false },
{ data: "phonelogs.closing", visible: false, searchable: false },
{ data: "phonelogs.answeredBy", visible: false },
{ data: 'PrisonFacilityListing.Prison_Name' },
{
data: "phonelogs.printed", searchable: false,
render: function (val, type, row) {
return val == 0 ? "No" : "Yes";
}, searchable: false
},
{ data: "form.FirstName", visible: false },
{ data: "form.LastName", visible: false },
{ data: "form.PrisonerID", visible: false }
],
select: 'single',
order: [2, 'desc'],
});
var previousLog = null; // To store previous data
var previousSelectedRow = null; // To store the previously selected row
function isDifferentLog(log1, log2) {
return JSON.stringify(log1) !== JSON.stringify(log2);
}
$('#editTable tbody').on('click', 'tr', function () {
var newLog = table2.row(this).data();
var currentRow = this;
console.log('New log selected:', newLog);
// Check if there is previous data and the user is trying to select a new row
if (previousLog && isDifferentLog(previousLog, newLog)) {
var userConfirmed = confirm("You have unsaved changes. Do you want to overwrite the previous response?");
if (!userConfirmed) {
// Deselect the new row immediately
$(currentRow).removeClass('selected');
// Re-select the previous row if it exists
if (previousSelectedRow) {
$(previousSelectedRow).addClass('selected');
}
return; // Exit if the user does not confirm
}
}
// Clear previous selection
table2.$('tr.selected').removeClass('selected');
// Proceed with updating the data if the user confirms or there is no previous data
$(currentRow).addClass('selected');
previousLog = newLog; // Update the previous data with the new data
previousSelectedRow = currentRow; // Store the current row as the previously selected row
I tried this but then I couldn't even half select the rows:
var previousLog = null; // To store previous data
var previousSelectedRow = null; // To store the previously selected row
function isDifferentLog(log1, log2) {
return JSON.stringify(log1) !== JSON.stringify(log2);
}
$('#editTable tbody').on('click', 'tr', function () {
var newLog = table2.row(this).data();
var currentRow = this;
console.log('New log selected:', newLog);
// Check if there is previous data and the user is trying to select a new row
if (previousLog && isDifferentLog(previousLog, newLog)) {
var userConfirmed = confirm("You have unsaved changes. Do you want to overwrite the previous response?");
if (!userConfirmed) {
// Re-select the previous row and deselect the new row
table2.rows().deselect(); // Deselect all rows
if (previousSelectedRow) {
table2.row(previousSelectedRow).select(); // Re-select the previous row
}
return; // Exit if the user does not confirm
}
}
// Clear previous selection
table2.rows().deselect();
// Proceed with updating the data if the user confirms or there is no previous data
table2.row(currentRow).select();
previousLog = newLog; // Update the previous data with the new data
previousSelectedRow = currentRow; // Store the current row as the previously selected row
});
Thanks in advance.. I can't set up a live test, but I can give you Allan access again if it is more than a simple mistake on my part.
