Menu icon Foundation
Re-initializing plugins after Ajax load

I have a reveal modal that contains a menu. When I click on a menu item it loads a new page using BarbaJS . The problem is the page loads, but the reveal stays open and when I close it, it won't reopen. I tried to trigger a close on a new page load but I get an error message. I've used the following: 

Barba.Dispatcher.on('newPageReady', function() {

  $('[data-reveal]').foundation('close');

});

 

I also tried

Barba.Dispatcher.on('transitionCompleted', function() {

  $('[data-reveal]').foundation('close');

});

Both times I get the following error:

foundation.core.js:281 Uncaught (in promise) ReferenceError: We're sorry, 'close' is not an available method for this element.

When I try to reinitialize with 

Foundation.reInit('reveal');

I get this error 

TypeError: Cannot read property '_init' of undefined

Any ideas on how to fix this?

 

I tried the same thing for a sticky header and got the same result.

F6barbapjaxAJAXReinit

I have a reveal modal that contains a menu. When I click on a menu item it loads a new page using BarbaJS . The problem is the page loads, but the reveal stays open and when I close it, it won't reopen. I tried to trigger a close on a new page load but I get an error message. I've used the following: 

Barba.Dispatcher.on('newPageReady', function() {

  $('[data-reveal]').foundation('close');

});

 

I also tried

Barba.Dispatcher.on('transitionCompleted', function() {

  $('[data-reveal]').foundation('close');

});

Both times I get the following error:

foundation.core.js:281 Uncaught (in promise) ReferenceError: We're sorry, 'close' is not an available method for this element.

When I try to reinitialize with 

Foundation.reInit('reveal');

I get this error 

TypeError: Cannot read property '_init' of undefined

Any ideas on how to fix this?

 

I tried the same thing for a sticky header and got the same result.

Chris Anderson about 2 years ago

Those lessons are helpful but not applicable in this case. How do you recommending re-initializing Foundation plugins when the original content has been replaced?

Kevin Ball about 2 years ago

It looks like the problem is you're trying to reinitialize, but the original item isn't there anymore, it has been replaced!  You can initialize foundation on any new content by grabbing it with jQuery and running the `$.fn.foundation` helper method on it... so if you're replacing the entire page, you'll probably want to do something like this:

Barba.Dispatcher.on('newPageReady', function() {

  $(document).foundation();

});

 

 

Matt Boden over 1 year ago

Hi Kevin

Thanks for your help and advice. For me this works, but only somewhat.

Whilst the transitions work, and plugins are initialized i am getting are ongoing warning messages in the console regarding double dipping on loading foundation plugins.

What might be the recommendation here?

I’d seen a few posts suggesting to remove $(document).foundation(); from app.js but this doesn’t stop the errors.   

Any help greatly appreciated.

Cheers, Matt

Jason Wan about 1 year ago

did you find a solution to the warning messages in the console?

i have run into the same issue and have try the above methods with no luck

Thanks

Kevin Frilot 12 months ago

I'm also looking for a solution to this.  Would love an update on this topic!

 

Thanks

Petr Ogurcak 12 months ago

Is tjhere  a way how to check if plugins is initialized? 

I have the same problem with 

$(window).on('load', function(){
   Foundation.reInit('equalizer');
});

as on same pages there is no equalizer and I get error 

We're sorry, '_init' is not an available method for this element.