Developer Hooks

When using Loop Builder with Ajax Filter, you can hook into the filter completed event to run custom JavaScript after filtering completes. This is useful for:

• Reinitializing third-party plugins
• Updating custom UI elements
• Running animations or effects
• Handling custom show/hide logic

Available Events

divi_filter_completed

Fires after filter results are rendered and pagination is updated, but before filter counts finish updating. This is a jQuery event, so you need jQuery to listen for it.

jQuery(document).on('divi_filter_completed', function() {
  // Filter results have been rendered
  // Pagination has been updated
  // Filter counts may still be updating

  // Your custom code here
  console.log('Filter results updated');
});

note

This event requires jQuery. Divi loads jQuery by default, so it is available on all pages where Divi Ajax Filter runs.

Execution Order

When a filter is applied, the following steps happen in order:

1. Results render - Filtered items are inserted into the page
2. Filter parameter tags update - Active filter tags are refreshed
3. Pagination updates - Page numbers and visibility are recalculated
4. divi_filter_completed fires - Your custom code runs here
5. Loading state clears - The loading spinner is removed
6. Filter counts update (async) - Option counts are recalculated in the background
7. Scroll to section - If enabled, the page scrolls to the results area

Examples

Reinitialize a Third-Party Plugin

jQuery(document).on('divi_filter_completed', function() {
  // Reinitialize a lightbox plugin after new items load
  if (window.myLightbox) {
    window.myLightbox.init();
  }
});

Run Custom Animations

jQuery(document).on('divi_filter_completed', function() {
  // Fade in newly loaded items
  jQuery('.et_pb_module').css('opacity', 0).animate({ opacity: 1 }, 400);
});

Update a Custom Results Counter

jQuery(document).on('divi_filter_completed', function() {
  // Count the visible loop items and update a custom element
  var visibleItems = document.querySelectorAll('.et-l--loop .et_pb_module').length;
  var counter = document.getElementById('my-results-counter');
  if (counter) {
    counter.textContent = visibleItems + ' results found';
  }
});

Divi 4 Compatibility

The divi_filter_completed event name is the same in both Divi 4 and Divi 5. If you have existing code that listens for this event from Divi 4, it will continue to work in Divi 5 without changes.