jQuery Document Ready and Function Scope

Question

I want to provide helper functions that allow various components of a complex jQuery-based UI to hide or show a loading div (used when an Ajax call is initiated from various portions of the page).

To that end, I initially wrote code like this:

<script type="text/javascript">
$(function ()
{
    var loadingControl = $("#loading");

    function showLoading() {
        loadingControl.show();
    }
}
</script>

However, I quickly realized that showLoading is only in scope within that particular document ready.

Following the advice from

https://stackoverflow.com/a/1055799/141172

I declared showLoading in global scope like this:

<script type="text/javascript">
var showLoading;
$(function ()
{
    var loadingControl = $("#loading");

    function showLoading() {
        loadingControl.show();
    }
}
</script>

However, I still find that showLoading is not available in document ready blocks that execute later. The error is

The value of the property 'showLoading' is null or undefined, not a Function object

This behavior can be seen here:

http://jsfiddle.net/NfXFT/4/

The jsFiddle also proves that the showLoading implementation's document ready runs before the document ready block that calls it.

What is going wrong, and how can I make this helper method available?

I define it within a document ready block because it relies on '#loading' being available. Is there a better approach to accomplishing the same goal of providing a helper function to hide/show the loading screen? I want to keep this in a helper function because the implementation may change later.

Answer 1

Right after posting, I realized what I had done wrong.

function showLoading() {
    loadingControl.show();
}

should be

showLoading = function() {
    loadingControl.show();
}