Hi,
I’d like to report a bug affecting multiple native Bricksforge elements when PJAX page transitions (Swup) are enabled.
The issue
When navigating to a page containing Bricksforge widgets via PJAX, the widgets fail to initialize. I tested with Before & After, Flip Everything and Scroll Video — none of them work when arriving via PJAX. On a hard reload they all work fine.
With the Before & After widget specifically, the following error appears in the console:
Uncaught ReferenceError: brfBeforeAndAfter is not defined
Where it comes from
bricksforge_elements.js is only loaded on pages that contain a Bricksforge widget. When arriving via PJAX, handleScripts() in transitions.js loads elements.js dynamically and asynchronously. However, handleBricksforgeScripts() calls the widget initialization functions almost immediately — before elements.js has had time to load and execute.
The result is that the functions defined in elements.js (like brfBeforeAndAfter, brfFlipEverything) are simply not available yet when they are called.
On a hard reload, elements.js is already present in the DOM from the start, so everything works fine. The bug only occurs on PJAX navigation to a page that was not the entry point.
Interestingly, for Swiper and Splide (third-party libraries used by Bricks), transitions.js already implements a retry polling mechanism that waits until the library is available before calling the init function. Something similar seems to be missing for the widgets that depend on elements.js.
To make the Before & After widget work, I had to add the following code manually in the Compatibility (pageview) field:
function tryBrfBeforeAndAfter(attempts = 0) {
if (typeof brfBeforeAndAfter === 'function') {
brfBeforeAndAfter();
} else if (attempts < 20) {
setTimeout(() => tryBrfBeforeAndAfter(attempts + 1), 100);
}
}
tryBrfBeforeAndAfter();
Environment
- WordPress 6.9.4
- Bricks Builder 2.3
- Bricksforge 3.1.8.4 with PJAX / Swup page transitions enabled
- Tested with Before & After, Flip Everything and Scroll Video widgets, on a page that is not the PJAX entry point
Hope this helps, thanks!