JQuery Ready Document and Scope

Question

I want to provide helper functions that allow various components of a complex jQuery-based user interface to hide or show divs for loading (used when an Ajax call is initiated from different parts of the page).

To this end, I originally wrote the code as follows:

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

However, I quickly realized that showLoading is only available within this document.

Following the tips

stack overflow

I declared showLoading in global scope as follows:

 <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 ready-made document blocks that run later. Mistake

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

This can be seen here:

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

jsFiddle also proves that the showLoading implementation document is ready to go before the document ready block that invokes it.

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

I define it in the document ready block because it relies on the availability of '#loading'. Is there a better approach to achieving the same goal - to provide a helper function to hide / show the loading screen? I want to save this in a helper function, because the implementation may change later.

Answer 1

Immediately after posting, I realized what I did wrong.

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

it should be

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