Initializing Webflow Components in HTML Loaded through AJAX

Design help Custom code
1

Hello,

We are using Webflow components on an HTML page which, after being loaded, pulls in additional HTML containing Webflow components through AJAX calls. For example, after the page initially loads, user actions may invoke an AJAX call to pull in an HTML snippet with a Webflow slider.

The problem is when these HTML snippets are loaded through AJAX, the Webflow components are not getting initialized. For example, no event handlers are added to the slider arrows.

Is there any way to initialize Webflow components in the scenario I’ve described above?

Thanks in advance.

2

You should pre-load everything you need on separate hidden layers, and switch/display them as needed.

3

Thanks. I’ve been trying to avoid loading all the HTML at once because of the sheer size - not mobile friendly. Some of our users only need a small percentage of the AJAX loaded HTML.

4

Yes, but then you will have to sacrifice Webflow components.

5

I came up with a solution to my problem. They key points are:

  • Before loading (through AJAX) additional html containing Webflow components call, Webflow.destroy().

  • After the dynamic html is added to the DOM and is visible (i.e. the elements have been laid out by the browser) call Webflow.ready();

Note: This solution reinitializes ALL Webflow components on the page. It would be nice to be able to target specific components.