I have few functions like foundation() and jScrollPane() that I am calling on page load, but I also call them on ajaxComplete

Is there an easier way to do this except adding the same content bellow

$(document).ready(function() {

and bellow

$(document).ajaxComplete(function(){

despite the fact that the current one is working fine ?

I have few functions like foundation() and jScrollPane() that I am calling on page load, but I also call them on ajaxComplete

Is there an easier way to do this except adding the same content bellow

$(document).ready(function() {

and bellow

$(document).ajaxComplete(function(){

despite the fact that the current one is working fine ?

• javascript
• jquery
• ajax

Share Improve this question Follow asked Mar 9, 2014 at 7:33 devdev 74533 gold badges1515 silver badges3232 bronze badges 4

• document ready cant work. This event will only called if the page fully loaded. After that, this event will not longer been fired. – Adrian Preuss Commented Mar 9, 2014 at 7:36
• Let me be a bit more specific. My web site is Ajax based but it has a static fallback for SEO. I call the functions on document ready for the static load, but when I load other pages or reload the current one with Ajax I have to call them again under the ajaxComplete. So that makes firing the same functions on 2 distances and my question is if there is a way to do that better ? – dev Commented Mar 9, 2014 at 7:47
• First, SEO is believed to be a myth. Second, bots don't do JS (maybe except Google) thus $(document).ready() will not run for the bot. Have the contents in HTML instead. – Joseph Commented Mar 9, 2014 at 8:04
• I know bots ignore javascript. When you initially load the page it goes for the fallback content, the first load does not call the ajax. – dev Commented Mar 9, 2014 at 8:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can simply move your initialization to the separate function, let say initUI and call if from both event handlers:

function initUI() {
    foundation(); 
    jScrollPane();
}

$(function() {
    initUI();
});

$(document).ajaxComplete(function() {
    initUI();
});

or even shorter

$(initUI);
$(document).ajaxComplete(initUI);

or the shortst version I can think of and my favorite:

$(document).on('ajaxComplete ready', initUI);