Forums › Forums › Search & Filter Pro › Re-attach event handlers when using the HTML5 History API (Barba js)

Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Anonymous
    (Private)  June 28, 2018 at 4:30 pm #181536

    Hi,
    I developed a wordpress theme using S&F Pro 2.4.3 as an external dependency.
    I use HTML5 History API (via the barbajs library).
    This means that when a user opens the website, the site resources load only once. And the other pages are loaded by ajax calls.

    THE PROBLEM
    If the first loaded page is not the page that contains the s&f form, then when the user will reach the targeted page, the s&f form will no longer work.
    Obviously, when the page containing the s&f form is the first loaded, the filtering works like a charm.

    THE SOLUTION
    barbajs give a way to execute some codes each time a new page is loaded.
    So far, with other scripts I manually re-attach event handlers each time a page is loaded.
    I tried a $('searchandfilter').searchAndFilter() but it seems that the scope of the library is limited to your script.

    THE HELP I NEED
    I saw that I can deactivate the scripts loading via wordpress and manually load them into my own code but I was confused a bit when I explored your code.
    Can somebody give me a safely way to manually re-hydrate event handlers in my own code?

    Thanks in advance,
    Best regards
    Mystro Ken

    Ross Moderator
    (Private)  June 28, 2018 at 8:13 pm #181576

    Hi Ken!

    As long as our JS files are loaded on your page, you should have access to our init methods no problem.

    I do see a typo though! (lets hope its so simple)

    $('searchandfilter').searchAndFilter()

    Needs to be:

    $('.searchandfilter').searchAndFilter()

    You were missing the dot .searchandfilter

    Let me know how you get on.

    Thanks

    Anonymous
    (Private)  July 5, 2018 at 3:11 pm #182018

    Hey Ross!
    Thanks for your answer.

    I made a typing mistake on my last post.
    However, I finally found a solution to my problem.

    In fact, I needed to run $('.searchandfilter').searchAndFilter() in the right place at the right time. So I used a mutation observer on the DOM. And everything is working now.

    Ross Moderator
    (Private)  July 5, 2018 at 4:18 pm #182024

    Great stuff, glad you got it to work 🙂

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