Query Loop not initializing after AJAX load via [bricks_template]

How To
,
1

We’re building a WordPress-based SPA and dynamically loading Bricks templates using [bricks_template id="X"] via AJAX.

On initial page load, the Query Loop inside the template works as expected, including the infinite scroll loading effect. However, when the same template is loaded via AJAX, the loop fails to initialize. The <!--brx-loop-xxxxx--> comment is missing, and the infinite scroll indicator never appears or triggers.

Confirmed that the template includes a properly configured Query Loop element in Bricks.

We’ve tried:

  • Defining BRICKS_IS_AJAX and BRICKS_IS_FRONTEND as true
  • Using bricks_render_element() instead of do_shortcode()

In both cases, the content is rendered, but the Query Loop does not function.

Environment:
WordPress 6.8.2
Bricks 2.0-rc+
PHP 8.2.27

Questions:

  • Is there a JavaScript API or method to manually initialize the Query Loop after injecting it via AJAX
  • Is there an official approach for enabling Query Loop functionality in SPA environments

Thanks in advance for any insight or suggestions.

2

You can try running bricksInitQueryLoopInstances() JavaScript function after your fetch the DOMs from your custom AJAX endpoint.

3

That did the trick. Huge thanks – truly appreciated! :sob: