How To Fix The Problem Of Telerik RadAjaxLoadingPanel Only Loading On First Postback

TODO:

I recently had an issue, where the RadAjaxLoadingPanel would only load on the first button click.  This was frustrating, and like many things Telerik, there are 10 answers and 0.5 of them work.  To fix this, I hooked into the button click event in JQuery, and then showed the loading panel manually from there.

SOLUTION:

<telerik:RadCodeBlock ID="rcbInitHandler"runat="server">
     <script type="text/javascript">
            //global variables
            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            

            
            //add the init activity
            Sys.Application.add_init(appl_init);

            //Do this on init
            function appl_init() {
                var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
                pgRegMgr.add_endRequest(EndHandler);
                pgRegMgr.add_beginRequest(BeginHandler);
            }

            //Called before async postback
            function BeginHandler() {
                document.body.style.cursor = 'wait';
            }

            //Called after async postback
            function EndHandler() {
                if (currentLoadingPanel != null && currentUpdatedControl != null)
                    currentLoadingPanel.hide(currentUpdatedControl);
                currentUpdatedControl = null;
                currentLoadingPanel = null;
                document.body.style.cursor ='default';
            }

            //Show the loading panel
            function ShowLoadingPanel() {
                currentLoadingPanel = $find('<%=rdlpLoadingPanel.ClientID%>');
                currentUpdatedControl ='<%=pnlSomePanel.ClientID%>';
                currentLoadingPanel.show(currentUpdatedControl);
            }

            $(document).ready(function () {
                 //Register buttons so we get pop-up.  we could have done all buttons, but we do not want to get the grid button
                 $('#<%=btnLoad.ClientID%>').live("click",function () {
                     ShowLoadingPanel();
                 });
            });
     </script>
</telerik:RadCodeBlock>

NOTES:

You will need a Loading Panel called rdlLoadingPanel, a panel called pnlSomePanel, and a button called btnLoad.  The rest is pretty self explanatory.