StateRestore via Ajax, callback function is called twice (once with undefined data)

zeckstein

I'm trying to store states in my database with the ajax option and I'm having trouble getting the save action to work. For some reason, in my console, the ajax callback is being called twice. Once with the correct data, and again with undefined data (which causes an undefined error).

{
                        extend: 'createState',
                        text: 'Create View',
                        attr: {
                        'title': 'Create View',
                        },
                        config: {    
                        creationModal: true,
                        }
                    },
{
                        extend: 'savedStates',
                        text: 'Saved Views',
                        className: 'saved-views',
                        background: false,
                        attr: {
                            'title': 'Saved Views',
                        },
                        config: {
                            ajax: idwiz_handle_states
                        }
                    }

I'm using these options related to state saving and loading for some custom date pickers:

stateRestore: {
                create: true, // Enable the creation of new states
                remove: true, // Enable the removal of states
                rename: true, // Enable the renaming of states
                save: true, // Enable the saving of states
            }, 
            stateLoaded: function (settings, data) {
                if (currentStateName) {
                    $('#saved_state_title').text('Saved view: ' + currentStateName);
                }
            },
            stateSaveParams: function(settings, data) {
                // Save the current values of the date pickers
                data.startDate = $('#wiztable_startDate').val();
                data.endDate = $('#wiztable_endDate').val();
                
            },
            stateLoadParams: function(settings, data) {

                // Delay the restoration of the date picker values
                setTimeout(function() {
                    $('#wiztable_startDate').val(data.startDate);
                    $('#wiztable_endDate').val(data.endDate);
                }, 500);
            },

And then this is my callback function:

function idwiz_handle_states(data, callback) {
            console.log("idwiz_handle_states called with data:", data);
            console.trace();
            const DtNonce = idAjax_data_tables.nonce;
            // Include the action type in the data to be sent to the server
            var ajaxData = {
                action: 'idwiz_handle_dt_states', // This is the WordPress action
                dataTableAction: data.action, // This is the DataTables action
                stateRestore: data.stateRestore
            };

            idemailwiz_do_ajax(
                ajaxData.action,
                DtNonce, 
                ajaxData, 
                function(response) {
                    if (data.action === 'load') {
                        callback(response);
                    } else {
                        console.log('State action successful:', response);
                    }
                }, 
                function(error) {
                    console.log('Error:', error);
                    console.log('Status:', error.status);
                    console.log('Status Text:', error.statusText);
                    console.log('Response Text:', error.responseText);
                }
            );
        }

In my console, I have some logging, and first I see the call with the data:

idwiz_handle_states called with data: {action: 'save', stateRestore: {…}}

But then it seems to be called again with no data:

idwiz_handle_states called with data: undefined

I'm stumped!

zeckstein

I ended up having to resort to a debounce method to prevent the callback from running with undefined values a second time:

let lastCallTime = 0;
            const debounceTime = 500; // 500 milliseconds
            const currentTime = Date.now();

            if (currentTime - lastCallTime < debounceTime) {
                console.log("Function call debounced");
                return;
            }

            lastCallTime = currentTime;

I'm still perplexed why it's doing this, and specifically only when creating a new state (with or without the modal FYI). Loading, renaming, and deleting a state doesn't replicate the issue.

zeckstein

I've put my configurations into a pastebin here: https://pastebin.com/9nVXJMgQ

I can't create an example because this a local site and is being powered by ajax.

Along with the issue of the function firing twice, I can't get the table to refresh/redraw after saving/deleting/renaming a state. Now sure if it's related.

Really hoping someone can give some insight here!