[Resolved] CSS class applied to search filter label disappears after AJAX update

[Author]

Posts

[keviinC]

Tell us what you are trying to do?
I want to toggleClass to the label or checkbox on click inside the filter of my layout.
The class is only visible for a ms and then it's gone. Everytime i pres the filter button it reloads the script and my code won't work.

Is there any documentation that you are following?
Here's a screencast: hidden link
Heres' my code: hidden link

What is the link to your site?
hidden link

I hope that you can help 🙂

[Beda]

Seems that is an AJAX updated View?

If so, you'd need to re-fire your code after the AJAX operations are concluded.

This can be done in the View, below the Filter Editor in the JS Section there is a "Front End JS events" button that lets you re-add your code at the moment AJAX finishes (or other moments)

If that is not a View with AJAX, I'd need to know more details on how to replicate such issue.

Thanks!

[keviinC]

Hello Beda 🙂

I've tried this, but with no luck.
Now i just tried with "label"on click - and you can see the class is added, but not re-added after ajax load.

My filter settings is this: AJAX results update when visitors change any filter value
Here's my new code: hidden link
Here's a screencast of where i inserted the code.: hidden link

What to do? :/

[keviinC]

Here's my last try after 6 hours... I just can't make this work...
In the video you can see quickly that the label add's the class done, but it just won't stay there :/

Screen cast: hidden link
Code: hidden link

[Christian Cox]

you can see quickly that the label add's the class done, but it just won't stay there :/
Yes, when a View is updated with AJAX, the original label and search filters are overwritten with code from the AJAX response. You must apply the custom CSS class again after the results have been updated, based on whether or not the checkbox is checked. You should use jQuery(document).on() for click handlers instead of jQuery('input').click(), because the original inputs are overwritten, breaking your click handlers. Here's an example:

// add class to label when input changes
jQuery(document).ready(function () {
    jQuery(document).on('click', 'input', function () {
        if (jQuery(this).is(':checked')) {
            jQuery(this).parent().addClass('done');
        } else {
            jQuery(this).parent().removeClass('done');
        }
    });

    // After ajax load, loop over replaced inputs and re-apply parent element classes if needed
    jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function(event,data) {

        jQuery('input').each(function (index, item) {
            if (jQuery(item).is(':checked')) {
                jQuery(item).parent().addClass('done');
            }
        });
    });
});

[keviinC]

Thank you so much ?
You're a life saver.....