Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Zurb Foundation javascript reInit module not working

i'm ajaxifying a website. My menu should always be sticky (using the sticky module provided by Foundation). But it is only sticky on a regular page load, and not on ajax reload (aka when navigating on the website)
I'm trying to re-initialise the module when the event ajaxComplete happens, using the line provided in the documentation of Foundation 6:

$(document).ajaxComplete(function () {
    Foundation.reInit($('.sticky'));
    //other code
});

But it doesn't seem to work, because I get this error in the console :

TypeError: Cannot read property '_init' of undefined
    at HTMLElement.<anonymous> (foundation.core.js:103)
    at Function.each (jquery.min.js?ver=2.1.0:2)
    at o.fn.init.each (jquery.min.js?ver=2.1.0:2)
    at Object.reInit (foundation.core.js:102)
    at HTMLDocument.<anonymous> (stickyfooter.js:28)
    at HTMLDocument.dispatch (jquery.min.js?ver=2.1.0:3)
    at HTMLDocument.r.handle (jquery.min.js?ver=2.1.0:3)
    at Object.trigger (jquery.min.js?ver=2.1.0:3)
    at x (jquery.min.js?ver=2.1.0:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js?ver=2.1.0:4)

Which I don't understand. What does it mean ? How can I make the module work after an ajax reload ? The website in action : http://lesdeuxvagues.com/demo

like image 390
Marine Le Borgne Avatar asked Dec 08 '25 08:12

Marine Le Borgne


1 Answers

You didn't post your markup, but I visited the site and don't see a ".sticky" class in your CSS. You are calling

    Foundation.reInit() 

on a jQuery selector. So does

    $('.sticky')

select anything on your page? Why don't you try:

       Foundation.reInit($('[data-sticky]'))

which would reinitialize all the elements with attribute data-sticky

like image 109
genestd Avatar answered Dec 09 '25 21:12

genestd