[Resolved] AJAX Search no working in a view

[Author]

Posts

[rubenM-3]

Hi,
I have a view, a complex one, with a filter and results. If I don't use AJAX all works well, but if I use AJAX, it doesn't. I have some JS for filter, as I have some accordions and one Slider. You can see it in hidden link

I'd like to refresh results when user selects some value in fields,
thank you!

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've checked the search on the page and couldn't see any error in the browser's console. Looks like some optimization or security plugin is affecting the AJAX request.

To troubleshoot this, I'll suggest the following steps:

1. Please make sure that WordPress, active theme, and plugins are all updated to the latest versions.

2. It would be interesting to test this with all non-Toolset plugins disabled and a default theme like Twenty Twenty-One.

If it's fixed, you can start adding the disabled items, one by one, to narrow down to a possible conflicting one.

3. In case the issue still persists, I'll need to see how this view is set up in the admin area. You can share temporary admin login details, in reply to this message.

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing the access details.

I've performed some tests with a similar setup on my website but couldn't reproduce this behavior. This suggests that something specific to your website or server is involved.

Do I have your permission to download a clone/snapshot of the website? This will allow us to investigate this on a different server.

[rubenM-3]

Hi Waqar,
yes please!

Thank you for your help!

[Waqar]

Thank you for the permission.

I've downloaded the website's clone and will be performing some tests on this.

Will share the findings, as soon as this testing completes.

[Waqar]

Just wanted to let you know that I'm still working on this.

Will be able to share the detailed findings with you today.

[Waqar]

Thank you for waiting.

During troubleshooting, I found that the following custom code in the active child theme's 'functions.php' file is causing the conflict with the AJAX updates:

function ejecutar_script_despues_post() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        // Espera hasta que el DOM esté completamente cargado
        $(window).on("load", function() {
            // Selecciona el contenedor y establece el relleno superior a 0
            $(".tb-youtube > div").css("padding-top", "0");
        });
    });
    </script>
    <?php
}

add_action( 'wpv-after-display-post', 'ejecutar_script_despues_post', 101, 2 );

You can replace the above code with the slightly updated version as follows:

function ejecutar_script_despues_post() {
    ?>
    <script>
    (function($) {
        $( document ).on( 'ready js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated', function( event, data ) {
            $(".tb-youtube > div").css("padding-top", "0");
        });
    });
    </script>
    <?php
}

add_action( 'wp_footer', 'ejecutar_script_despues_post', 101, 2 );

This will fix the conflict and the results will show correctly with AJAX too.

[rubenM-3]

Hi Waqar,
thank you for your help! Yes, once you change this function, AJAX works. But the JS that is loaded with the view, that open/close filter fields, only work once. If you select one filter, and AJAX loads results, this JS does not work anymore.

document.addEventListener('DOMContentLoaded', function() {
initializeSlider();
setupToggleButtons();
expandBasedOnURLParameters();
});

document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('mostra-mobile');
var form = document.querySelector('.wpv-filter-form ');

// Función para obtener la altura total del contenido del formulario
function getScrollHeight(elm) {
var savedValue = elm.style.height;
elm.style.height = 'auto';
var height = elm.scrollHeight;
elm.style.height = savedValue;
return height;
}

function toggleForm() {
if (window.innerWidth <= 767) { // Solo actúa en móviles
if (form.style.maxHeight === '0px' || form.style.maxHeight === '') {
form.style.maxHeight = getScrollHeight(form) + 'px';
button.textContent = 'Ocultar filtro';
} else {
form.style.maxHeight = '0';
button.textContent = 'Mostrar filtro';
}
}
}

button.addEventListener('click', toggleForm);

// Inicializar estado basado en el tamaño de pantalla
function initialize() {
if (window.innerWidth > 767) {
form.style.maxHeight = 'none'; // Asegura que esté visible en escritorio
button.style.display = 'none'; // Oculta el botón en escritorio
} else {
form.style.maxHeight = '0'; // Asegura que empiece oculto en móvil
button.style.display = 'block'; // Muestra el botón en móvil
}
}

window.addEventListener('resize', initialize); // Ajustar cuando se cambia tamaño de ventana
initialize(); // Llamada inicial al cargar
});

Once AJAX is executed, how can I restore this?
Thanks!

[Waqar]

Thanks for the update and glad that it is working now.

At the bottom of the existing custom script, you can include the following code:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
  	// force 'DOMContentLoaded' event again after AJAX view's AJAX completes
	window.document.dispatchEvent(new Event("DOMContentLoaded", {}));
});

This new script will refire the event 'DOMContentLoaded' once the search results have been updated through the AJAX. The 'DOMContentLoaded' is the event that your existing script is using, so they will re-initialize too.

[rubenM-3]

Hi Waqar,
this is perfect. Thank you very much for your help!