Re-attach event handlers when using the HTML5 History API (Barba js)

Anonymous

#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

#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

#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

#182024

Great stuff, glad you got it to work 🙂

[Author]

Posts