Registry for javascript functions that get called on page load (including AJAX calls)

Question

This is a specific variation on a question that seems to have been asked a few times, apologies if the answer is already out there.

I have a standard website with a menu bar and a large content div. There are many javascript functions that I want to run every time the page is rendered, that is - after the initial load AND on any ajax call that updates the central content div.

I understand that I need to call them on the 'success' part of the ajax call - but what I'm trying to avoid is a huge list of calls all in one place. I have about 30 javascript files and I want to keep them separated and not dependent on each other.

What I'm trying to set up is a central "function registry" - this is what I have so far -

var rebind = function(){

    var functions = [];

    var add = function(f){
        functions.push(f);
    }

    var call = function(){
        for (i = 0; i < functions.length; i++) {
            functions[i]();
        }
    }

    return {
        add: add,
        call: call
    }
}();

Here is how I call this function -

$(function() {
    rebind.call();
});

$(document).on("click", "a.ajax-content", function() {
    var url = $(this).attr("href");
    $("div#content").load(url, function() {
        rebind.call();
    });

    history.pushState(null, null, url);
    event.preventDefault();
});

And here's an example of how I register a function, using Datepicker as an example.

rebind.add(function() {
    $(".dm-type").datepicker({
        dateFormat: "dd/mm",
        changeYear: false,
        changeMonth: true
    });
});

Just to clarify, I use $(document).on('click'... when I can. This method is simply for functions that need to be called after the page is loaded. A global version of document.ready that also handles AJAX calls.

It seemed like a good idea, but it's not working 100%. I'm getting some infinite loops, with jquery-raty for instance.

Has anybody come up with a good solution for this? I looked into livequery, it didn't handle everything I needed and I read that it's not advised because it can slow things down. If there's an easy solution to this it would help me a great deal.

Thanks! James

Answer 1

I would use a different technique as you are already using jQuery - delegation!

Attach a custom event to your body and use that as a listener, that was you can create multiple function calls and even manage which calls are triggered from there.

 //in a global file    
 $(document.body).on('myCustomEvent',function(event, data){
    //console.log(event,data);
    //manage your function calls here.
    //You can pass data through and have your logic here too.
    if(data.somedata || data.someotherdata) datepicker();
});


//in a singular file
$(document).on("click", "a.ajax-content", function() {
    var url = $(this).attr("href");
    $("div#content").load(url, function() {
        $(document.body).trigger('myCustomEvent', [{somedata:true}]);
    });
    history.pushState(null, null, url);
    event.preventDefault();
});

You could also attach the listener to the body in all your separate script files and each trigger fire by any script will trigger it in all other scripts etc.