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?
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! http://forum.wpbeaverbuilder.com/knowledge-base/filter-reference/
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.
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…
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:
<?php
function my_global_builder_posts( $post_ids ) {
$post_ids[] = ‘291’;
return $post_ids;
} add_filter( ‘fl_builder_global_posts’, ‘my_global_builder_posts’ );
?>
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.
-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.
Justin,
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?
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:
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.
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.
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?