Support Forums

Looking for support? You can access the support system via your account.

Forums Forums Search & Filter Pro Add active class to item on click

Viewing 8 posts - 1 through 8 (of 8 total)
  • Amber Weinberg
    #8682

    Hi!

    I’ve been trying to add an active class to the li on click, but for some reason it’ll only work when the radio/checkbox button itself is clicked, not the full label. Is it possible to add an active class when the whole thing is clicked?

    Ross Moderator
    #8689

    Hey Amber

    How are you currently adding the class?

    If you are using jQuery you could always use closest – something like:

    $(".someinput").on("change", function(){
        $(this).closest("li").toggleClass("active")
    });

    Thanks

    Amber Weinberg
    #8698

    Perfect, thanks! For some reason, just doing a simple click on the li wasn’t working.

    Is there a way to do it automatically based on the URL though? So if the URL is:

    /?_sft_trip-crafted-for=explorers&_sfm_rafting_trip_length=Multi-Day&_sfm_rafting_trip_level=Medium

    the explorers, multi-day and medium choices would already have the active class? Here’s the sample URL:

    http://development-client-server.com/echo/rafting-trips/?_sft_trip-crafted-for=explorers&_sfm_rafting_trip_length=Multi-Day&_sfm_rafting_trip_level=Medium

    Ross Moderator
    #8731

    Hey Amber

    Although they don’t have the active class I’m assuming that the search form is correctly pre populated? As in, the checkboxes for those options are automatically selected?

    In this case I think it would be easier to add classes based on this – so something like (untested):

    $('.searchandfilter input[type=checkbox]:checked').each(function(){
        $(this).closest("li").toggleClass("active")
    });

    Basically this will go through all the checkboxes in the search form that are checked, and then apply the class to the nearest li.

    Hope that helps!?

    Amber Weinberg
    #8745

    I originally tried that one as well, but as you can see in the sample link, it works perfectly now on load, but if I change the parameters and click something else, the :checked isn’t getting applied to the new items, although it then shows in the URL search screen? Sorry about this!

    Ross Moderator
    #8775

    Hey Amber

    I think I follow you, then you want to fire the above code whenever a form input is changed/updated – there would be a few ways to hook into it

    One simple solution I think would be to hook in to the S&F js/ajax event (http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/):

    //this event is fired when an ajax request starts - so in most cases this is when you submit the form, or change a field - but there might the smallest of delays before the class is applied
    $(".searchandfilter").on("sf:ajaxstart",function(){
        $('.searchandfilter input[type=checkbox]:checked').each(function(){
            $(this).closest("li").addClass("active")
        });
    });

    The alternative would be to check when an input has changed – which would be instant – I guess better (but untested code) so..:

    //when something is changed in a form
    $(".searchandfilter input, .searchandfilter select").on("change",function(){
        $('.searchandfilter input[type=checkbox]:checked').each(function(){
            $(this).closest("li").addClass("active")
        });
    });

    Of course you would need to remove the active class on all your elements first before running the scripts above which only add the class you need

    Hope that helps 🙂

    Amber Weinberg
    #8781

    Everything worked perfectly for radio items, but not for checkboxes (since they could be multi-toggled) I just changed the first section to radios as well, so now everything is working. Thanks for your help 🙂

    Ross Moderator
    #8785
    This reply has been marked as private.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.