Page builder linked scripts.

lawrence whittemore asked on June 7, 2021 20:33

What's the best way to get JavaScript files to load with page builder widgets. I've noticed the tags disappear in the admin and seem to show up as some weird long string. This seems to mess up my widgets when at the end of the code I am trying to call the script I loaded.

<script type="text/javascript" src="~/flexslider/jquery.flexslider-min.js"></script>
<div class="flexslider">...</div>
<script>
jQuery(".flexslider").flexslider();
</script>

Something like the above seems to cause an issue because the site can't find flexslider function. text I'm going to win, most questions by a single user award. :P

page builder javascript

Recent Answers

Sean Wright answered on July 6, 2021 23:32

@Lawrence,

You'd need to provide more code/details about your Widget and where the above script is running to get detailed answers.

However, all Widget/Section HTML is rendered asynchronously on the client-side when in the Page Builder UI in the Administration application.

This means any JavaScript that executes expecting the Page HTML to be available when the Page loads, will not work and could be subject to weird race conditions.

Instead you need to either accept the fact that some JavaScript will not work correctly in the Page Builder (but will work fine in 'Preview' mode), or create event hooks that Widget code can call when it's rendered in the DOM.

Here's the lifecycle of a Page Builder Page:

Page is rendered via ASP.NET Core (without any Page Builder component HTML)
Browser receives HTML and executes Xperience Page Builder JS
Xperience Page Builder JS makes XHR requests back to ASP.NET Core app for Page Builder component HTML (this happens in parallel for all Editable Areas defined on a Page)
HTML is returned for Sections/Widgets and the Editable Area markers are replaced with this HTML

You will need to have 2 patterns for executing JavaScript:

When executing in 'Page Builder' mode, the Widget/Section View should execute the JS when the Widget/Section is added to the Page
When executing in 'Preview' or 'Live' mode, the Page executes the JS when the DOM is loaded

0 votesVote for this answer Mark as a Correct answer

Jim Piller answered on August 13, 2021 18:16

Lawrence,

I don't know if you found an answer to your question or not, but I came across this documentation that explains there are two events that will allow you to load java script when a page builder page is loaded or when a widget is added to the page. This has helped me w/ the same issue.

https://docs.kentico.com/spaces/flyingpdf/pdfpageexport.action?pageId=76851837

Hope this helps!

0 votesVote for this answer Mark as a Correct answer