[Solved] RadAjaxLoadingPanel remains after Ajax Response

[Allen Smothers]

Hello,

I have a single MasterPage with a Content block.  I've set up a RadAjaxManager and RadAjaxLoadingPanel on the masterpage that handles all ajax on the site.  From time to time the RadAjaxLoadingPanel will fail to close after the Ajax Response.   

Below is a code sample from our masterpage:

        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

            <script type="text/javascript">
            function adjustLoadingPanelHeight()
            {
                $get("<%= ajaxLoadingPanel.ClientID %>").style.height = document.documentElement.scrollHeight + "px";
                var imgLoading = $get("<%= imgLoading.ClientID %>");
                centerLoadingImage(imgLoading);
            }

            function centerLoadingImage(element)
            {
                var scrollTop = document.body.scrollTop;
                var scrollLeft = document.body.scrollLeft;
                var viewPortHeight = document.body.clientHeight;
                var viewPortWidth = document.body.clientWidth;

                if (document.compatMode == "CSS1Compat")
                {
                    viewPortHeight = document.documentElement.clientHeight;
                    viewPortWidth = document.documentElement.clientWidth;
                    scrollTop = document.documentElement.scrollTop;
                    scrollLeft = document.documentElement.scrollLeft;
                }

                var topOffset = Math.ceil(viewPortHeight/2 - element.offsetHeight/2);
                var leftOffset = Math.ceil(viewPortWidth/2 - element.offsetWidth/2);
                var top = scrollTop + topOffset - 40;
                var left = scrollLeft + leftOffset - 70;
                element.style.position = "absolute";
                element.style.top = top + "px";
                element.style.left = left + "px";
            }

            </script>

        </telerik:RadScriptBlock>
        <%--11JUN09: Added EnableScriptCombine="false" to scriptMgr--%>
        <telerik:RadScriptManager ID="scriptMgr" runat="server" EnableScriptCombine="true"
            EnableViewState="False">
        </telerik:RadScriptManager>
        <telerik:RadStyleSheetManager ID="cssMgr" runat="server" EnableViewState="False">
        </telerik:RadStyleSheetManager>
        <telerik:RadAjaxManager ID="ajaxMgr" EnableViewState="True" DefaultLoadingPanelID="ajaxLoadingPanel"
            runat="server">
            <ClientEvents OnResponseEnd="ajaxResponseEnd" />
            <ClientEvents OnRequestStart="adjustLoadingPanelHeight();" />
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" BackColor="#AAAAAA" InitialDelayTime="500" Width="100%"
            Height="100%" Style="position: absolute; top: 0; left: 0; text-align: center;
            vertical-align: middle; z-index: 1;" Transparency="20" IsSticky="true" runat="server">
            <asp:Image ID="imgLoading" runat="server" AlternateText="Loading..." ImageUrl="images/icons/ajax-loader4.gif"
                BorderStyle="None" />
        </telerik:RadAjaxLoadingPanel>

Thanks for the help!

-- Allen

[Dimo]

Hi Allen,

You code snippet looks OK, except that

<ClientEvents OnRequestStart="adjustLoadingPanelHeight();" />

should be

<ClientEvents OnRequestStart="adjustLoadingPanelHeight" />


Please check for JS errors during or after the AJAX request.

If the problem persists, we will need a runnable web page, which exhibits the unexpected behavior.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Allen Smothers]

Thanks for the help.  I've updated my code with your fix but the issue still remains.

I will try to put together a simple solution that contains the behavior.

- Allen