Question

I’ve got following JavaScript functions but want to refactor the $(document).ready() as I’ve got 2 instance of it. How can I achieve this?

FlashMessenger = {
    init: function() {
        setTimeout(function() {
            $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
            });
        }, 5000);
    }
}

SelectLanguage = {
    init: function() {
        $('#selectLanguageId').change(function() {
            $('#frmSelectLanguage').submit();
        });
    }
}

$(document).ready(FlashMessenger.init);
$(document).ready(SelectLanguage.init);

Answer 1

First off, there’s no reason you have to combine them.

But if you want to:

$(document).ready(function(jq){
    FlashMessenger.init(jq);
    SelectLanguage.init(jq);
});

Breaking it down:

• Create a function to do all your init (it can be named or anonymous; the one above is anonymous).
• Have it call the other init functions, passing in the jQuery instance that jQuery passes you just in case they use it.

You might choose to wrap each init call in a try/catch block as well, so that errors in one init don’t prevent the next init from occuring, but that depends on your needs.