Refactor $(document).ready(), currently have 2 instances.

Question

Hi all,

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

Just combine them into one call with an anonymous function:

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

Answer 2

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

Answer 3

It’s perfectly acceptable to set multiple handlers for $(document).ready, although you may have a good reason to do otherwise that I’m not aware of. You might be interested in knowing that $(handler) can be used as short–hand for $(document).ready(handler):

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

If you really want them in one call though, try this:

$(function() {
    FlashMessenger.init();
    SelectLanguage.init();
});

Answer 4

I think what the op is saying is, "If in the future I have a third function to be invoked at document.ready, then how do I do it without touching that piece of code?"

If you do not want multiple $(document).ready() calls, you could just create an array called startupHooks and add each method to it:

startupHooks[ startupHooks.length ] = myNewStartupHook;

and your startup script could look like

$(document).ready(function() {
    for( var i=0; i<startupHooks.length; i++ ) {
        startupHooks[i]();
    }
}

I know that is not mighty useful, but if that appeals to you, you can do it this way.

Personally, I'd go with multiple $(document).ready() calls.

Answer 5

Option 1

FlashMessenger = {
    init: function() {
        setTimeout(function() {
            $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
            });
        }, 5000);
    }
}    
SelectLanguage = {
    init: function() {
        $('#selectLanguageId').change(function() {
            $('#frmSelectLanguage').submit();
        });
    }
}

$(function(){
    FlashMessenger.init();
    SelectLanguage.init();
});

Option 2

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

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

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

Option 3
You actually don't need those 2 objects since the only hold the init methods, so here's the ultimate solution, in my opinion, unless you use those objects elsewhere.

$(function(){
    $('#selectLanguageId').change(function() {
        $('#frmSelectLanguage').submit();
    });
    setTimeout(function() {
        $(".flash").fadeOut("slow", function () {
                $(".flash").remove();
        });
    }, 5000);
})

I prefer 2 and 3 for this reason.

Answer 6

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.

Answer 7

Personally I'd go for not using document.ready at all. If you place the scripts at the end of your html-page(just before the tag) you can just write in any way you like. Maybe this doesn't work for 0.01% of the scripts but it never failed to work for me.

Positive effect of this is that the initial HTML+CSS rendering goes faster. You can also read about it on yahoo. http://developer.yahoo.com/performance/rules.html#js_bottom