[Resolved] Setting cookie with Show only filter options that would produce results?

[Author]

Posts

[bobA-2]

Using this code if I click rapidly they are saved in a cookie as intended. If I pause between click for 2-3 seconds and click nothing is saved into cookie.

It is related to
toolset views Form options there is this option
Show only filter options that would produce results that updates filters right away before clicking submit.

If I disable that the cookie writing works however I click.

So must be related to the timing of the AJAX refresh and the cookie setting. When you click rapidly, the cookie is set before the AJAX refresh occurs. However, when you pause, the AJAX refresh might be interfering with the cookie setting. Any workaround or just not possible with Show only filter options that would produce results?

document.addEventListener('DOMContentLoaded', function() {

    // Function to set a cookie

    function setCookie(name, value, days) {

        const d = new Date();

        d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); // Set expiration date

        const expires = "expires=" + d.toUTCString();

        document.cookie = name + "=" + value + ";" + expires + ";path=/";

    }

    // Function to get a cookie value

    function getCookie(name) {

        const nameEQ = name + "=";

        const ca = document.cookie.split(';');

        for (let i = 0; i < ca.length; i++) {

            let c = ca[i];

            while (c.charAt(0) === ' ') c = c.substring(1, c.length);

            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);

        }

        return null;

    }

    // Function to handle checkbox state based on the cookie

    function handleCheckboxes() {

        const selectedServices = getCookie('selected_streamingtjenester');

        if (selectedServices) {

            const services = selectedServices.split(',');

            services.forEach(service => {

                const checkbox = document.querySelector(input[value="${service}"]);

                if (checkbox) {

                    checkbox.checked = true;

                }

            });

        }

    }


    // Event listener for checkboxes

    const checkboxes = document.querySelectorAll('input[name="wpv-streamingtjeneste[]"]');

    const saveChoicesCheckbox = document.getElementById('save-choices');


    // Function to save selections to cookie immediately

    function saveSelections() {

        const selected = Array.from(checkboxes)

            .filter(i => i.checked)

            .map(i => i.value);


        if (saveChoicesCheckbox.checked) { // Only save if the "Save my choices" checkbox is checked

            setCookie('selected_streamingtjenester', selected.join(','), 30); // Store for 30 days

        } else {

            // Optionally, clear the cookie if not saving choices

            setCookie('selected_streamingtjenester', '', -1); // Clear cookie if unchecked

        }

    }


    // Attach the event listener to checkboxes

    checkboxes.forEach(checkbox => {

        checkbox.addEventListener('change', saveSelections);

    });

    // Handle AJAX refresh event

    document.addEventListener('js_event_wpv_parametric_search_form_updated', function() {

        // Re-select checkboxes based on the saved cookie

        handleCheckboxes(); // Reapply checked state after AJAX refresh

        saveSelections(); // Call saveSelections when AJAX refresh occurs

    });

    // Attach event listener to the search button

    const searchButton = document.querySelector('.wpv-submit-trigger');

    if (searchButton) {

        searchButton.addEventListener('click', function() {

            // Reapply checkbox states based on saved cookie when search button is clicked

            handleCheckboxes();

        });

    }

    // Call to set the checkbox state on page load

    handleCheckboxes();

});

[bobA-2]

I ended up using url parameters after ajax search

document.addEventListener('DOMContentLoaded', function() {
    // Function to set a cookie
    function setCookie(name, value, days) {
        const d = new Date();
        d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); // Set expiration date
        const expires = "expires=" + d.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
        console.log(`Cookie set: ${name}=${value}; expires=${expires}`); // Debugging output
    }

    // Function to get a cookie value
    function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(';');
        for (let i = 0; i  {
                const checkbox = document.querySelector(`input[name="wpv-streamingtjeneste[]"][value="${service}"]`);
                if (checkbox) {
                    checkbox.checked = true; // Check the checkbox
                    console.log(`Checkbox for ${service} checked.`); // Debugging output
                }
            });
        } else {
            // If the cookie does not exist, show save choices checkbox
            removeChoicesContainer.style.display = 'none';
            saveChoicesContainer.style.display = 'block';
            console.log('Cookie does not exist, showing save choices checkbox.'); // Debugging output
        }
    }

    // Function to extract services from URL parameters
    function extractServicesFromURL() {
        const params = new URLSearchParams(window.location.search);
        const services = params.getAll('wpv-streamingtjeneste[]'); // Correctly get all values
        console.log(`Services extracted from URL: ${services}`); // Debugging output

        if (services.length > 0) {
            setCookie('selected_streamingtjenester', services.join(','), 30); // Store for 30 days
        } else {
            console.log('No services found in URL parameters.'); // Debugging output
        }
    }

    // Call to set the checkbox state on page load
    handleCheckboxes();

    // Listen for the form submission
    const submitButton = document.querySelector('input[name="wpv_filter_submit"]');
    if (submitButton) {
        submitButton.addEventListener('click', function(event) {
            console.log('Form submitted. Extracting services from URL...'); // Debugging output
            // Delay extraction to allow the URL to update
            setTimeout(() => {
                extractServicesFromURL(); // Extract services from URL parameters after form submission
                handleCheckboxes(); // Update checkbox visibility after extracting services
            }, 1500); // Set to 1500 ms as you mentioned
        });
    }

    // Listen for the remove choices checkbox change
    const removeChoicesCheckbox = document.getElementById('remove-choices');
    if (removeChoicesCheckbox) { // Check if the checkbox exists
        removeChoicesCheckbox.addEventListener('change', function() {
            if (this.checked) {
                // If unchecked, delete the cookie immediately
                setCookie('selected_streamingtjenester', '', -1); // Clear cookie
                console.log('Remove choices checkbox checked: cookie deleted.');
                handleCheckboxes(); // Update checkbox visibility after deletion
            }
        });
    } else {
        console.error('Remove choices checkbox not found.'); // Error message if checkbox is not found
    }

    // Listen for the AJAX update event
    document.addEventListener('js_event_wpv_filter_results_updated', function() {
        console.log('AJAX update event detected.'); // Debugging output
        // Delay extraction slightly to allow the URL to update
        setTimeout(() => {
            extractServicesFromURL(); // Extract services from URL parameters after AJAX update
            handleCheckboxes(); // Update checkboxes based on the newly set cookie
        }, 1500); // Set to 1500 ms as you mentioned
    });
});