Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82207

Row selection and deselection problem

$
0
0

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.


Viewing all articles
Browse latest Browse all 82207

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>