Forums › Forums › Search & Filter Pro › Submit Button

Viewing 4 posts - 1 through 4 (of 4 total)
  • Anonymous
    (Private)  January 3, 2020 at 1:45 pm #230172

    Hi there,

    Does you know a way using Jquery or similar to close a side panel upon submit.

    Ive been trying to get my filter form reponsive for days, and its just not working. So i have decided to have a button that opens the content.

    The form isn’t set to autoupdate, but uses a submit button. What I want is when the user has chosen the correct options and submit, this side panel closes.

    Is this possible?

    Website is

    https://www.avidrambler.co.uk/walking-routes/

    Thanks in advance.
    Rob.

    Ross Moderator
    (Private)  January 7, 2020 at 1:48 pm #230316

    Hi Rob

    I guess there would be two ways to do it.

    First, we have two events, ajaxstart and ajaxfinish:
    https://searchandfilter.com/documentation/faq/#will-my-lightbox-or-other-fancy-javascript-work-with-this-plugin

    I think you might want to hook into ajaxstart.

    Or I think you could just do the traditional:

    $('.searchandfilter').submit(function(){
    //do stuff
});

    Let me know if that makes sense or if I’ve missed anything.

    Thanks

    Anonymous
    (Private)  January 7, 2020 at 2:46 pm #230332

    Hi Ross,

    I think they may be beyond my skills.

    I can see when I open the sidebard with the filter inside, its adding the class of “jet-hamburger-panel-visible” to the html element.

    <html lang=”en-GB” class=”jet-hamburger-panel-visible”>

    I think its a case of removing that class when the submit button is clicked. Sorry I have zero knowledge of JS. But ive tried a few things, they obviously didn’t work.

    Forgive my ignorance, I tried this first. Which is probably completely wrong.

    $(‘.searchandfilter’).submit(function(){
    h(“html”).removeClass(“jet-hamburger-panel-visible”)),
    });

    Rob.

    Ross Moderator
    (Private)  January 10, 2020 at 11:38 am #230625

    Hi Rob

    Try this: 

    jQuery(document).on("sf:ajaxstart", ".searchandfilter", function(){
	jQuery(".jet-hamburger-panel").removeClass("open-state");
	jQuery("html").removeClass("jet-hamburger-panel-visible");
});

    I just tested using the JS console and it seemed to work.

    I would note, the class added to <html> doesn’t show / hide the the panel, but it does affect the layout in some way (which I guess is a necessary part of opening / closing the panel.

    I did find that adding/removing the class open-state of .jet-hamburger-panel is what actually shows / hides the panel.

    Let me know how you get on.

    Thanks

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)