Properly load Page Content built with Beaver Builder via Ajax

Hi all,
We are using Beaver Builder to build out page content in a site that is currently under development.

In certain areas of the site, we have implemented a sidebar menu that loads in the content of the target page via a JS/jQuery script. The Ajax script simply replaces the contents of the <main> element. The script finds the target’s <main> element, it gathers the <main> element and all the stuff within it, and then replaces the current page’s <main> element with what it gathered.

The content does load in, but the none of the Beaver Builder specific content styling is applied. For example, the gallery content module positions images in a grid. But in the ajax loaded content, the styling is not applied and the images end up in one thin, horizontally centered column.

Do you have any thoughts on how we can manually “initialize”, “trigger” or “bring over” the target page’s Beaver Builder page specific styling when its content is called for loading via our Ajax script?

Your help is much appreciated.

Hey Nick,

Thanks for posting! You can check the fl_builder_global_posts filter on the KB article. Basically, the assets for a certain page only gets loaded on that page itself. That filter allows you to load the assets for that page globally. Give it a shot and let us know how it goes!



I was able to use the filter function to globally load the css files of the target pages.
Thanks! That get’s me closer to the solution but it doesn’t solve everything.

There is inline styling that is not being applied to certain content modules and subsequent elements that need it to display correctly.

For example:
<div class=“fl-gallery-item” style=“display: block; position: absolute; top: 0px; left: 190px;”>

Only comes through as:
<div class=“fl-gallery-item” >

… when the page content is loaded via the Ajax script.

Any ideas on how to get the inline styling to be applied to the respective elemetns?

Hey Nick,

It sounds like the JavaScript for that module isn’t being loaded. Can you check to see if the JS for that post is loaded? Each post in the fl_builder_global_posts array should have its CSS/JS assets loaded. Those look something like this…

<link rel='stylesheet' id='fl-builder-layout-4805-css' href='' type='text/css' media='all'/>
<script type='text/javascript' src=''></script>

If you’re having trouble with that, you could just try building the CSS/JS URLs yourself. Each file is named POST_ID-layout.css and POST_ID-layout.js.

Let me know.


Hi Justin,
The CSS and JS files are being loaded into the DOM. See below:

I am using this php function to globally load the CSS and JS file belonging to post 291:
function my_global_builder_posts( $post_ids ) {
$post_ids[] = ‘291’;
return $post_ids;
} add_filter( ‘fl_builder_global_posts’, ‘my_global_builder_posts’ );

Here is the HMTL code that is generated:
<link rel=‘stylesheet’ id=‘fl-builder-layout-229-css’ href=‘’ type=‘text/css’ media=‘all’ />
<link rel=‘stylesheet’ id=‘fl-builder-layout-291-css’ href=‘’ type=‘text/css’ media=‘all’ />

</script><script type=‘text/javascript’ src=‘’></script>
<script type=‘text/javascript’ src=‘’></script>

Just to explain the snippets above: I am currently within the parent page, id 229, and trying loading in the content of one of its child pages, id 291. The CSS and JS files are already there, being loaded in the DOM, however, the inline styles are not applied when the child content is loaded into the current parent page. (I explained how this works in my an earlier post.)

It seems as though the inline styles are dependent on an JS detectable browser event of some sort such as: $( document ).ready(). Could this be the reason why the inline css styles are not being applied? Now that we know the necessary CSS/JS files are in place, is there a way to manually fire the beaver builder css inline styles?

Thanks for the help thus far. You guys rock.

Hey Nick,

Thanks for the detailed response. I think I know what’s going on now. The Gallery module uses a few standard jQuery gallery libs (based on the layout you choose). Those are adding the inline styles and layout logic to the gallery.

The gallery code does fire on document ready, but it should still fire even if it’s inserted after the fact.

Are you inserting the script before inserting the HTML? That’s the first thing that comes to mind. Let me know.


Ah sorry, I forgot to say that the HTML should be inserted first, then the script so the HTML is available when it’s fired.

Thanks for getting back to me on this. This has been very helpful thus far.

Yes, the JS scripts are being inserted before any of the HTML content is loaded in.
We could potentially write some additional JS code to load/reload the necessary JS file after the content is loaded. Targeting the Beaver Builder page specific JS files would be easier if there was an id="" attribute associated with them. How can we add this attribute? Is there a filter of function that we could hook into to add such attribute?

Does this sound like a good solution or is there something up your sleeves that we should try first? Other techniques or possible alternative methods of loaded in the JS files after content is loaded?


Hey Nick,

That’s good to hear! As for targeting the scripts, you could do something like this…

var script = $('script[src*="/cache/' + post_id + '"]');

I’m not sure about your exact setup, so it’s hard to say what might help in terms of loading the JS after the content.

Let me know if that helps.


Hello again-

We have a solution in place to load the correct JS into the page via AJAX after the HTML is loaded via ajax and we are still having the same issue with entries remaining unstyled.

Is there something more that must be done to get the layout-###.js file to run once it is loaded? I also tried something like below, which also did not work to initialize the styling correctly after the ajax loading:

delete FLBuilderLayout;

To see this loading process in action, visit this page: and then click the “Inspiration” link in the sidebar menu. It has styling that is not loading properly.

For an even better representation of our issue, visit this page:
…and then click on “Finishes & Colors” from the sidebar menu.

Hey Nick,

I think you just need to change FLBuilderLayout.init; to FLBuilderLayout.init(); and it should work. You also shouldn’t need delete FLBuilderLayout; as it doesn’t get defined again if it already exists. Let me know how that goes.


Hey Justin-

I am trying this using Chrome’s console…

When I put in
I get an error: “undefined”

However if I put in
It returns:


Still not sure what is going on here.

One other thing I just did note is that one of the pages I am testing against is using some photo galleries - it appears that these rely on YUI and YUI is not loaded globally into each page - is that correct? That might be another piece of the puzzle.

Hi Nick,

The _init function doesn’t return anything, so that’s why you’re seeing undefined when you enter FLBuilderLayout.init(); into the console. FLBuilderLayout.init; is just a reference to the function, so entering that doesn’t actually run any code.

The gallery module does make use of either the wookmark or mosaicflow scripts depending on the layout you choose. If those aren’t present, it won’t work, so you may need to load those as well. The slideshow uses YUI.

Do you think missing dependancies might be the issue?