Menu icon Foundation
How to Ajaxify Foundation

I'm trying to ajaxify my website (using Foundation 6 with FoundationPress wordpress plugin).

Now my issue is that I have a sticky nav, it works perfectly on first page load, but if I go to another page (loaded with ajax), then it doesn't work anymore. 

I found that this is because the relevant javascript was only executed on document.ready and it didn't refire with ajaxComplete, so I tried to make it refire.

In foundation.sticky.js, I added these two functions : 

!function ($) {
    console.log('document ready- sticky');
    initialiseSticky($);
}(jQuery)
$(document).ajaxComplete(function () {
    console.log('ajax complete- sticky');
    initialiseSticky($);

});

and i replaced the original function by this 

function initialiseSticky($) {
   //sticky module
}

I saw that the sticky module requires foundation.util.mediaquery and foundation.util.triggers, so I did the same in those files too. 

 

But it doesn't change anything. It still won't work on ajax reload. 

Has anyone successfully ajaxified a Foundation site ? How did you make the javascript work ?

javascriptajaxifyAJAXjquery

I'm trying to ajaxify my website (using Foundation 6 with FoundationPress wordpress plugin).

Now my issue is that I have a sticky nav, it works perfectly on first page load, but if I go to another page (loaded with ajax), then it doesn't work anymore. 

I found that this is because the relevant javascript was only executed on document.ready and it didn't refire with ajaxComplete, so I tried to make it refire.

In foundation.sticky.js, I added these two functions : 

!function ($) {
    console.log('document ready- sticky');
    initialiseSticky($);
}(jQuery)
$(document).ajaxComplete(function () {
    console.log('ajax complete- sticky');
    initialiseSticky($);

});

and i replaced the original function by this 

function initialiseSticky($) {
   //sticky module
}

I saw that the sticky module requires foundation.util.mediaquery and foundation.util.triggers, so I did the same in those files too. 

 

But it doesn't change anything. It still won't work on ajax reload. 

Has anyone successfully ajaxified a Foundation site ? How did you make the javascript work ?

Rafi Benkual over 2 years ago