Menu icon Foundation
Abide form in a Reveal modal isn't initialised when added after page load

I have a single window app where fresh page content is added to a container div via Ajax. When a new ajax page is loaded, I run $(<page div>).foundation() to initialise Foundation 6 on the new content, which is the method described here:

http://foundation.zurb.com/sites/docs/javascript.html#adding-plugins-after-page-load

However, if I have an Abide form in a Reveal modal, the Abide form is not initialised. I discovered that the reason for this is that the Reveal plugins runs early and moves the modal content to <body>, and then the Abide plugin runs, but only on the <page div> content, as you'd expect, and does not find the moved Reveal modal content which is now attached to <body>.

First, does anyone have a clean workaround for this?

And secondly, can this be lodged as a bug in Foundation?

Thanks.

revealabideAJAX

I have a single window app where fresh page content is added to a container div via Ajax. When a new ajax page is loaded, I run $(<page div>).foundation() to initialise Foundation 6 on the new content, which is the method described here:

http://foundation.zurb.com/sites/docs/javascript.html#adding-plugins-after-page-load

However, if I have an Abide form in a Reveal modal, the Abide form is not initialised. I discovered that the reason for this is that the Reveal plugins runs early and moves the modal content to <body>, and then the Abide plugin runs, but only on the <page div> content, as you'd expect, and does not find the moved Reveal modal content which is now attached to <body>.

First, does anyone have a clean workaround for this?

And secondly, can this be lodged as a bug in Foundation?

Thanks.

PeerBrief Techops about 3 years ago

This has been lodged at github: https://github.com/zurb/foundation-sites/issues/9193