In my website, the main index.php have a drop-down menu, and if I click on an item, an Ajax loader work and writes in the main div of the main index.

But if this import use foundation function (reveal, callout, tabs..), this import doesn't work.

If in web explorer console I insert again this mand '$(document).foundation();', import works but I receive in the log a warning

Tried to initialize drill down on an element that already has a Foundation plugin. foundation.min.js:65 Tried to initialize dropdown-menu on an element that already has a Foundation plugin.foundation.min.js:65

Tried to initialize off-canvas on an element that already has a Foundation plugin.foundation.min.js:65

Tried to initialize responsive-toggle on an element that already has a Foundation plugin.foundation.min.js:65

Tried to initialize reveal on an element that already has a Foundation plugin.

Can somebody help me to find a clean solution to reload foundation?

In my website, the main index.php have a drop-down menu, and if I click on an item, an Ajax loader work and writes in the main div of the main index.

But if this import use foundation function (reveal, callout, tabs..), this import doesn't work.

If in web explorer console I insert again this mand '$(document).foundation();', import works but I receive in the log a warning

Tried to initialize drill down on an element that already has a Foundation plugin. foundation.min.js:65 Tried to initialize dropdown-menu on an element that already has a Foundation plugin.foundation.min.js:65

Tried to initialize off-canvas on an element that already has a Foundation plugin.foundation.min.js:65

Tried to initialize responsive-toggle on an element that already has a Foundation plugin.foundation.min.js:65

Tried to initialize reveal on an element that already has a Foundation plugin.

Can somebody help me to find a clean solution to reload foundation?

• javascript
• ajax
• zurb-foundation

2 Answers 2

In Foundation 6.2.3,

$(document).foundation() 

will call

reflow: function(this, plugins) 

with plugins undefined, so every plugin will be checked: The function will look at each child of $(document) with a [data-plugin_name] attribute and show this warning if that element already has been initialized:

if ($el.data('zfPlugin')) {
    console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
    return;
}

So you can either call foundation() directly on the new element after your ajax request :

$('#your_element').foundation();

or call reflow with a specified plugin (eg. reveal)

Foundation.reflow($('document'), 'reveal')

provided you don't already have an initialized 'reveal' element in your DOM

Mixed: (best solution I think)

Foundation.reflow($('#your_element'), 'reveal');

Firstly, do not call $(document).foundation(); more than once.

If you've updated an element already initialized with a plugin, you'll need to use reInit.

If you've added or pletely replaced an element with a new element you'll need to use $(element).foundation();

I use the following technique:

First, when foundation is initialized I store a global:

$(document).foundation();
__foundationRun = true;

Then, no matter when, the following util will handle initialization of new/updated elements:

function foundationUpdate(el) {
    if (__foundationRun) {
        if (el.data('zfPlugin'))
            // existing element already has a plugin - update
            Foundation.reInit(el);
        else
            // new element - initialize
            el.foundation();
    }
    // else leave for foundation to init
}

So you could use like this:

$(".accordion").append("<li>Item</li>");
foundationUpdate($(".accordion"));

or

var newAccordion = $("<ul class='vertical menu accordion-menu'"
    + " data-accordion-menu><li>Item</li></ul>");
$(".container").append(newAccordion);
foundationUpdate(newAccordion);