Menu icon Foundation
reInit accordion ajax: foundation is not a function

The question: How to reinit an accordion in ajax in 6.4.4rc1?

Code in main scripts.js ( I'm using gulp):

//Scripts.js
//main javascript file

import $ from 'jquery';

import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';


$(document).foundation();

import motionUI from 'motion-ui';

import foundationDatepicker from 'foundation-datepicker';

import { slickInit } from './slick/slick-init.js';

$(window).on('load', function(slick) {

	Foundation.reInit($('[data-equalizer]'));

});

This all works as expected.

 

The issue is with ajax generating a list of accordions.

So, the developer who coded the ajax functions used $("#element").foundation(); at the end of success: function(data) {}

Since my knowledge of ajax and js is limited I imagine to reflow/reinit the accordion.

 

However, this doesn't work as I get a "foundation is not a function" error.

I would greatly appreciate any hints/helps.

 

AJAXReinit

The question: How to reinit an accordion in ajax in 6.4.4rc1?

Code in main scripts.js ( I'm using gulp):

//Scripts.js
//main javascript file

import $ from 'jquery';

import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';


$(document).foundation();

import motionUI from 'motion-ui';

import foundationDatepicker from 'foundation-datepicker';

import { slickInit } from './slick/slick-init.js';

$(window).on('load', function(slick) {

	Foundation.reInit($('[data-equalizer]'));

});

This all works as expected.

 

The issue is with ajax generating a list of accordions.

So, the developer who coded the ajax functions used $("#element").foundation(); at the end of success: function(data) {}

Since my knowledge of ajax and js is limited I imagine to reflow/reinit the accordion.

 

However, this doesn't work as I get a "foundation is not a function" error.

I would greatly appreciate any hints/helps.