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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With