RadAjaxLoadingPanel causes page to postback without ajax, Masterpage missing content.

[Jackie]

I have an AjaxLoadingPanel on my page to prevent users from clicking the submit button more than once. The first submission/postback works perfectly. After the first postback, a second submission causes the page to flash blank like it's refreshing and postback seemingly without AJAX. The child page content is fine, but the masterpage's header and side panel both end up missing the list of tabs and links for navigating the site. Further postbacks exhibit the same behavior and the masterpage doesn't recover until a manual refresh. There are 2 buttons on the page for submission of the form and display of entries. Regardless of which button is pressed or in what order it always happens on the second postback. Hopefully I've just set something up wrong with the LoadingPanel but any insight would be appreciated.

HTML markup below:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad() {
                var grid = $find("<%= gridAgents.ClientID %>");
                var columns = grid.get_masterTableView().get_columns();
                for (var i = 0; i < columns.length; i++) {
                    columns[i].resizeToFit();
                }
            }
        </script>
    </telerik:RadCodeBlock>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageHeaderContentPlaceHolder" runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="SideBarPlaceHolder" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageContentPlaceHolder" runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div class="container">
            <!-- Input controls for form fields -->
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="UpdatePanel1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="UpdatePanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="false" BackgroundTransparency="70" Direction="LeftToRight" EnableSkinTransparency="true" Skin="Default" Style="position: center; width: 100%">
                </telerik:RadAjaxLoadingPanel>
                <br />
                <br />
                From: <telerik:RadNumericTextBox ID="txtFrom" runat="server" CssClass="form-control" NumberFormat-DecimalDigits="0" MinValue="0" Width="50px" NumberFormat-GroupSeparator=""></telerik:RadNumericTextBox>
                To: <telerik:RadNumericTextBox ID="txtTo" runat="server" CssClass="form-control" NumberFormat-DecimalDigits="0" MinValue="0" Width="50px" NumberFormat-GroupSeparator=""></telerik:RadNumericTextBox>
                <asp:Button ID="btnSet" runat="server" Text="Set" CssClass="btn btn-primary" OnClick="btnSet_Click" />
                <div id="output" runat="server" style="height: 70px; width: 100%; overflow: auto">
                    <telerik:RadGrid ID="grid" runat="server" AutoGenerateColumns="true" DataSourceID="DataSource">
                        <ClientSettings>
                            <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" EnableRealTimeResize="true" />
                        </ClientSettings>
                    </telerik:RadGrid>
                </div>
                <asp:SqlDataSource ID="DataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand=""></asp:SqlDataSource>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

C# backend below:

protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnInput_Click(object sender, EventArgs e)
{
    //Object creation and SQL insert
    if (err.Equals(String.Empty))
    {
        DataSource.SelectCommand = "SELECT * FROM [Table] WHERE [Col] = " + id.ToString();
        output.Attributes.CssStyle.Add("height", "70px");
        lblSuccess.Visible = true;
        clearControls(); //sets control fields to empty
    }
    else
    {
        lblErr.Visible = true;
        lblErr.Text = err;
    }
}

    protected void btnSet_Click(object sender, EventArgs e)
    {
        AgentDataSource.SelectCommand = "SELECT * FROM [Table] WHERE [Col] BETWEEN " + txtFrom.Text + " AND " + txtTo.Text;
        output.Attributes.CssStyle.Add("height", "300px");
        gridAgents.Rebind();
    }

Masterpage markup below:

<body>
        <table id="PageBody" cellpadding="0" cellspacing="0">
            <tr>
                <td id="PageHeaderSideBar">
                    <asp:Image ID="Image5" runat="server" SkinID="PageLogo" CssClass="PageLogo" />
                </td>
                <td id="PageHeaderLeftSide">
                    <asp:Image ID="Image1" runat="server" SkinID="Placeholder" />
                </td>
                <td id="PageHeaderContent">
                    <div class="Header">
                        <asp:SiteMapPath ID="SiteMapPath1" runat="server" SkinID="SiteMapPath" />
                        <div class="Title">
                            <asp:ContentPlaceHolder ID="PageHeaderContentPlaceHolder" runat="server">
                                Page Title</asp:ContentPlaceHolder>
                        </div>
                    </div>
                </td>
                <td id="PageHeaderRightSide">
                    <asp:Image ID="Image2" runat="server" SkinID="Placeholder" />
                </td>
            </tr>
            <tr>
                <td id="PageContentSideBar" valign="top">
                    <div class="SideBarBody">
                        <asp:ContentPlaceHolder ID="SideBarPlaceHolder" runat="server" />
                        <asp:Image runat="server" SkinID="Placeholder" />
                    </div>
                </td>
                <td id="PageContentLeftSide">
                    <asp:Image ID="Image3" runat="server" SkinID="Placeholder" />
                </td>
                <td id="PageContent" valign="top">
                    <asp:ContentPlaceHolder ID="PageContentPlaceHolder" runat="server" />
                </td>
                <td id="PageContentRightSide">
                    <asp:Image ID="Image4" runat="server" SkinID="Placeholder" />
                </td>
            </tr>
            <tr>
                <td id="PageFooterSideBar" />
                <td id="PageFooterLeftSide" />
                <td id="PageFooterContent" />
                <td id="PageFooterRightSide" />
            </tr>
        </table>
</body>

[Jackie]

I've fixed it by adding id and runat tags to my container div and setting the RadAjaxManager's AjaxUpdatedControl ControlID to the div's new id. Now loads correctly, the second button causes the loading panel to not be transparent while it is on the first button which is odd, but acceptable. Modified code below.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="container" id="divContainer" runat="server">
         ....
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="UpdatePanel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="divContainer" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
          ....
        </div>
    </ContentTemplate>
</asp:UpdatePanel>