filter everything

AJAX Filtering

A very useful feature if you don’t want the page to be refreshed every time during filtering.

How to enable and make it work

It can be enabled from the Filters → Settings → General tab and turning on the “AJAX for Filters” option.

In order to make AJAX filtering work, you need to specify the Class or ID of the products/posts container in the “HTML ID or Class of Posts Container” input field. (This field can be specified in the Filters → Settings → General tab and in each Filter Set in case you need to specify a unique ID or class for certain pages.)

For example, the HTML posts container that contains products on your site looks like this:

...
<div id="fe-plugin-container"></div>
<div id=”main_content” class="content-wrapper">
     <div class=”products”>
          <div class=”product-1”>...</div>
          <div class=”product-2”>...</div>
          <div class=”product-3”>...</div>
     </div>
     <div class=”pagination”>1, 2...5</div>
</div>
...

Keep in mind that if you want to update the pagination, you should specify the container that has both products and pagination. In our example, if you use an ID – it is #main_content or .content-wrapper if you use the class name.

Please note, that the container with the filter widget should not be inside the updated container. That’s why the “fe-plugin-container” is not inside the #main_content.

How to find the HTML ID or Class using the browser inspect tool

  1. Open the development tools (in Chrome it is Ctrl + Shift + I) choose the Elements and click the arrow icon to inspect elements on the page.
  2. Navigate to the products area, it will highlight the elements on the page. So you need to navigate to the area where it’ll highlight the posts container with pagination.
  3. You can see the needed container with the ID and Class, which you can use for AJAX settings.

The posts container does not have an ID or unique Class

In case your post’s container has no HTML container with an ID or unique class, you can always add it manually. This can be done in many ways – through child themes, via hooks, or with page builders like Visual Composer, Divi, Avada, etc.

If you are unable to resolve this issue yourself or if the AJAX feature does not work correctly, please disable this feature and ask your site’s webmaster/developer for assistance.

AJAX troubleshooting

When updating content on a page using AJAX, you may encounter the problem that some JS functionality stops working or some elements disappear. Why is this happening? Because some plugins/theme’s functionality that uses JS code is not AJAX compatible by default.

For example, you have content with toggle functionality on click. After the AJAX filtering this toggle functionality stops working. For example, the function for toggle looks like this:

jQuery('button.toggle').on('click', function(e){
  // the toggle functionality code 
});

In order to make it work you need to add a “ready” event to the “click” event to make it look like this:

jQuery('button.toggle').on('click ready', function(e){
  // the toggle functionality code 
});

If you do not have the ability to overwrite the original function, you can copy it and overwrite it with the “ready” event:

jQuery('button.toggle').on('ready', function(e){
  // the toggle functionality code 
});

If you need to re-init some jQuery plugin functionality after AJAX filtering, you can use the next code wrapper:

jQuery(document).on('ready', function(e){
    /* Plugin function to re-init, e.g. jQuery("[data-fancybox]").fancybox(); */
});