How To Use AJAX With Beaver Builder Posts Module

Anonymous

#184493

Hi,

I am trying to use the beaver builder posts module with Search and Filter but I am having no results. It only works without AJAX. I know another user is having this problem but it is marked as private so I cannot read solutions.

Could you help me set up the correct way to use beaver builder with live AJAX filtering?

I also tried using it with post grid but no luck either. With post grid I have it set up like this but it does not load any results.

[searchandfilter id=”16099″]
[searchandfilter id=”16099″ action=”filter_next_query”]
[post_grid id=”16143″]

Here is the current link to the site where I am working on it.

https://rsmdesign.com/work/portfolio-2/

I am trying to make it work like this site.

https://www.callisonrtkl.com/projects/

Could you guide me in the right direction? I have followed documentation exactly but no luck.

Anonymous

#184494

Hi,

You have to target the posts module classes to make it work with Ajax.
For BB Posts module, in the “Display Results” tab of SF form:

• Ajax Container: .fl-module-post-grid
• Pagination selector: .fl-builder-pagination a

Hope it works for you.

Anonymous

#185154

You’re welcome 😉

Anonymous

#185582

Thank you so much Avanti. I am confused how to display the ajax grid on the same page as the filter. Do I just use the custom display method and use those target classes then drop a Beaver Builder posts module below the shortcode on the page to get ajax to work?

If that is not correct would you be able to provide the steps to get it to work with Beaver Builder?

Anonymous

#185587

Hi,

Assuming you want the S&F filter on a CPT archive (portfolio for instance), put the S&F shortcode [searchandfilter id=”16099″] and a BB Posts module on the archive layout.
The Posts module has to be set to main query i think.
I guess you use Beaver Themer to customize the archive layout?
Or another method?

Take care to only have one Posts module on the page, multiple can trigger issues with S&F.

In Admin > S&F > “Display Results” tab, set the filter to “Post Type Archive”, Ajax ON, Ajax container to .fl-module-post-grid and Pagination selector to .fl-builder-pagination a.
If you use another Posts module, as PowerPack, you must adapt the classes.

This should make the things work.

Anonymous

#185706

This reply has been marked as private.

Trevor

#185735

This reply has been marked as private.

Anonymous

#185829

This reply has been marked as private.

Trevor

#185848

This reply has been marked as private.

Anonymous

#185913

This reply has been marked as private.

[Author]

Posts