Literal control not updating

[Steve]

I've been banging my head against this for a couple of days, I hope somebody can help me.

I have my RadAjaxManager defined on a master page.  On a page that uses the master page, I have defined a RadAjaxManagerProxy, 3 divs with runat="server" and an asp:Panel.  I've used divs with runat="server" before with success.  Here is the code for everything:

On the master page:

<telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="ajaxLoadingPanel" >
</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Skin="" Transparency="20" InitialDelayTime="100" MinDisplayTime="500">
<div style="background-position: center center; background: url('../Images/loading.gif') no-repeat center center; background-color: #F0F0F0; height:100%; width:100%;"></div>
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel_blank" runat="server" Skin="" Transparency="20" InitialDelayTime="100" MinDisplayTime="500">
<div></div>
</telerik:RadAjaxLoadingPanel>

On the child page:

    <telerik:RadAjaxManagerProxy ID="ajaxManagerProxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="divHomeControls">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="divHomeControls" LoadingPanelID="ajaxLoadingPanel_blank" />
                <telerik:AjaxUpdatedControl ControlID="divPrevNext" />
                <telerik:AjaxUpdatedControl ControlID="pnlGrid" />
                <telerik:AjaxUpdatedControl ControlID="divHistory" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="divPrevNext">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlGrid" />
                <telerik:AjaxUpdatedControl ControlID="divHistory" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="pnlGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="divHistory" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="top" colspan="2">
            <div id="divHomeControls" style="float:left;text-align:center;vertical-align:middle;padding:4px 0px 0px 0px" runat="server">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <span style="padding-right:10px;">Current Product File:</span>
                            <span style="padding-right:10px;"><asp:Label ID="lblHomePIL" runat="server" CssClass="SearchControl"></asp:Label>
                            </span>
                            <span style="text-align:right;padding-right:10px;">Issue Date:</span>
                        </td>
                        <td>
                            <span style="text-align:left;padding-right:10px;">
                               <telerik:RadDatePicker ID="dateChooserIssueDate" runat="server" AutoPostBack="True" onselecteddatechanged="dateChooserIssueDate_SelectedDateChanged"
                                Width="100px" Culture="English (United States)" Visible="True" Skin="Outlook">
                                <DateInput DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" AutoPostBack="True" Width="100%" CssClass="SearchControl"></DateInput>
                                <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="Hello" Width="200px"></Calendar>
                                <DatePopupButton ImageUrl="" HoverImageUrl="" Visible="True"></DatePopupButton>
                                </telerik:RadDatePicker>
                            </span>
                        </td>
                        <td align="right"><span style="text-align:right;padding-right:10px;">Issue #:</span></td>
                        <td align="left"><span style="text-align:right;padding-right:10px;"><asp:Literal ID="litIssueNumber" runat="server"></asp:Literal></span></td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td valign="top" colspan="2">
        <div id="divPrevNext" runat="server" style="margin:10px 0px 0px 0px; padding:10px; background:#f8fcff; border:1px solid #ccc;" >
            <table border="0" cellpadding="0" cellspacing="0"><tr>
            <td width="20px"><asp:Literal runat="server" ID="btnPrevItem"/></td>
            <td width="100%" style="text-align:center;vertical-align:middle;padding:4px 0px 4px 0px"><asp:Literal ID="litTitle" runat="server"></asp:Literal></td>
            <td width="20px" align="right"><asp:Literal runat="server" ID="btnNextItem"/></td>
            </tr></table>
        </div>
        </td>
    </tr>
    <tr>
        <td>
        <table>
        <tr>
        <td valign="top">
            <asp:Panel id="pnlGrid" runat="server">
                <span style="display:inline;"><asp:Label ID="lblUpdateStatus" runat="server" EnableViewState="False"></asp:Label></span>
                <edf:EdfItemDetailsGrid ID="edfItemDetailsGrid" runat="server"></edf:EdfItemDetailsGrid>
            </asp:Panel>
        </td>
        <td valign="top">
        <div id="divHistory" runat="server" style="margin:36px 0px 0px 20px;padding:0px 0px 0px 20px;position:fixed;top:300px;border:solid 1px red;" >
            <asp:Literal ID="litHistoryTable" runat="server"></asp:Literal>
        </div>
        </td>
        </tr>
        </table>
        </td>
    </tr>
</table>
<telerik:RadScriptBlock ID="scriptBlock" runat="server">
    <script type="text/javascript">
        // Prevent MS Ajax from changing scroll position after ajax postback.
        function scrollTo(x,y) {}
        function EdfGrid_InitializeLayoutHandler(gridName)
        {
            //If the page is redirecting as a result of an ajax event, no need to set the UI.
            if(itemViewEx2Redirecting == true) return;
        }

        function EdfGrid_ColumnResizeHandler(oGrid, eventArgs)
        {
            Refresh('<%=pnlGrid.UniqueID%>', "ColumnResize$"+eventArgs.get_gridColumn().get_element().offsetWidth+"$"+eventArgs.get_gridColumn().get_uniqueName());
        }

        function Refresh(target, arg)
        {
            var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
            if (ajaxManager) {
                if (target == null) {
                    ajaxManager.ajaxRequest(arg);
                }
                else {
                    ajaxManager.ajaxRequestWithTarget(target, arg);
                }
            }
        }

        function GetItem(direction) {

            Refresh('<%=divPrevNext.UniqueID%>', direction);
        }
    </script>
</telerik:RadScriptBlock>

The literals btnPrevItem and btnNextItem are merely anchors that are set in the code-behind to call the javascript function GetItem() with a direction of 'prev' or 'next'.  The literal litTitle merely displays the item number of the currently selected item.  edfItemDetailsGrid inside pnlGrid is a user control that contains a RadGrid.  The grid displays current and previous values for the currently selected item, such as UPC, description, price, etc.  The rows represent each of the item's data fields, and there are 4 columns: field name, current value, most-recent previous value, and date-of-change.  The litHistoryTable literal will show a table of all previous values for the selected row of the grid (i.e. the selected data field of the item).

Almost all of this works beautifully.  If I update any of the controls in divHomeControls, it updates the controls in divNextPrev, pnlGrid, and divHistory.  If I click on any row in the grid defined inside pnlGrid, it updates the literal control in divHistory correctly.  However, if I click on the next or previous buttons inside divNextPrev, it updates the grid inside pnlGrid correctly, but it does not update the literal control in divHistory.  Inside my Visual Studio debugging session, I can open the rendered page and see the correct, updated html for the rendered page, but in the browser, I see the previous contents of the literal control.

I have tried several different things to fix this, without any success.

I have tried changing divHistory to a asp:Panel.  I've tried changing it to a telerik:RadAjaxPanel.

I've tried removing divHistory altogether, and putting my literal control inside pnlGrid.

I've tried manually deleting the contents of divHistory just before doing the ajax call, by changing my client-side GetItem() function to look like this:

function GetItem(direction) {
    var divHistory = document.getElementById("<%= divHistory.ClientID %>");
    if (divHistory)
    {
        divHistory.innerHtml = "";
        divHistory.innerText = "";
        divHistory.textContent = "";
    }
    Refresh('<%=divPrevNext.UniqueID%>', direction);
}

In the above function, I've tried changing the
 Refresh('<%=divPrevNext.UniqueID%>', direction); 
to:
Refresh('<%=divHomeControls.UniqueID%>', direction); 

Nothing works.  In each case, when I look at the html for the rendered page in the visual studio debugging session, I see the correct html:

<div id="ctl00_ContentPlaceHolderMain_divHistory" style="margin:36px 0px 0px 20px;padding:0px 0px 0px 20px;position:fixed;top:300px;border:solid 1px red;left:584px;">
<table border="0" cellpadding="4" cellspacing="4">
<thead>
<th align="center" colspan="3">UCC Change History</th></thead>
<thead><th align="center" >Date of Change</th>
<th align="center" >Active Value</th><th align="center" >Previous Value</th>
</thead>
<tbody>
<tr>
<td colspan="3" align="center" >There is no history for this field.</td>
</tr>
</tbody>
</table>
</div>

But in the browser window, I see the data from the previous rendering.

Can anybody tell me what is going on and how I can fix this?

Thanks and regards,
Steve

[Steve]

Okay, I fixed the problem, although I don't know exactly why the problem occurred in the first place.  If anyone has the same problem, here is a possible answer.

Most of the processing of this page was done in the OnInit method.  That includes loading the grid, loading the history table, processing the control clicks, etc.  As I said before, the correct HTML was being rendered onto the browser.

In any case, I changed the next/previous controls from literals to asp:ImageButtons, did their processing in their click event handlers, which occur after PageLoad, and it suddenly worked.

Regards,
Steve