This is a migrated thread and some comments may be shown as answers.

Update to javascript do not get rendered

2 Answers 163 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Tracy Dryden asked on 13 Sep 2011, 05:55 PM

I have a user control which I use on mulitple pages. The user control contains a RadWindow, which contain a RadTabStrip and an asp:Panel. It also contains a custom control which outputs javascript necessary for the control. I've enclosed the entire contents of the RadWindow in an asp:Panel and used that panel to ajaxify the process. This all works great. When I click on the tabs the correct controls get loaded into the panel correctly, and the whole process seems to be ajaxified correctly (only the ajaxified panel is updated). Even the javascript code that is dynamically loaded with the user controls is executed (it's contained in RadScriptBlock). There's only one small problem: The javascript code that is output by the user control cwtg:ClientServerVariables is never updated! The code is output successfully when the control is initially loaded, and it always gets executed when a new control is loaded into the panel when a tab is clicked, but it's is always the original version of the code and doesn't contain any changes made during the postback!

I've stepped through my code, and I can actually see the updated javascript being output by the cwtg:ClientServerVariables control in its OnPreRender event handler, but that code never makes it back to the browser. If I comment out the RadAjaxManagerProxy in the control below, the javascript changes DO make it to the browser, but that destroys the nice ajaxification of the window!

So my question is: What is there about using the RadAjaxManager that causes the javascript output by my ClientServerVariables control to not be updated, when everything else in the ajaxified panel IS updated. Does it have to do with WHEN I am outputting the javascript (OnPreRender)?

FYI, I have tried outputting the javascript in all of the following ways. In none of them does the javascript contain the updated data:
1) Insert the javascript into an existing RadScriptBlock as a new literal control (as is done below).
2) Create a new RadScriptBlock and insert the javascript code into that as a new literal control.
3) Write out the javascript code "inline" by creating a literal control and inserting the javascript into that.
4) Register the javascript code using ClientScript.RegisterStartupScript
5) Register the javascript code using RadAjaxManager.ResponseScripts.Add

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="TicketDetailPopup.ascx.vb" Inherits="Controls_TicketDetailPopup" %>

<%@ Register Assembly="ClientServerVariables" Namespace="CWTG.WebControls" TagPrefix="cwtg" %>

<%@ Reference Control="~/Controls/dtlLocateRaw.ascx" %>

<telerik:RadAjaxManagerProxy runat="server" ID="rampTicketDetail">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="pnlWindowContent">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlWindowContent" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadWindow ID="rwTicketDetail" runat="server" Width="900px" Height="600px" Modal="False" AutoSize="False" KeepInScreenBounds="true"

Skin="WebBlue" Title="Polaris Workforce Web Ticket" VisibleStatusbar="False" CssClass="rwTicketDetail" ShowContentDuringLoad="false"

Behaviors="Resize, Close, Minimize, Move, Reload" OnClientShow="radWinShow" OnClientClose="radWinClosed"

OnClientResizeEnd="radWinResizeEnd" OnClientDragEnd="radWinDragEnd" OnClientCommand="radWinCommand" >

<ContentTemplate>

<asp:Panel ID="pnlWindowContent" runat="server" Width="100%" Height="400">

<telerik:RadTabStrip ID="rtsTicketDetail" runat="server" CssClass="rtsTicketDetail" OnClientTabSelecting="rtsTabSelecting"

SelectedIndex="-1" ClickSelectedTab="True" Skin="WebBlue" ScrollChildren="true" PerTabScrolling="true" ScrollButtonsPosition="Middle">

</telerik:RadTabStrip>

<asp:Panel ID="pnlDetailControl" runat="server" ViewStateMode="Disabled" Width="100%" Height="352">

</asp:Panel>

<cwtg:ClientServerVariables runat="server" ID="tdClientServerVars" ClientNamespace="ClientServerVars.DetailPopup" RenderClientVarsAs="SubControl" ControlID="rsbClientServerVars" DebugMessagesAs="Alert">

</cwtg:ClientServerVariables>

<telerik:RadScriptBlock ID="rsbClientServerVars" runat="server"></telerik:RadScriptBlock>

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

$(document).ready(function() {

// console.log(ClientServerVars.DetailPopup.ClientIDs);

});

</script>

</telerik:RadScriptBlock>

</asp:Panel>

</ContentTemplate>

</telerik:RadWindow>

2 Answers, 1 is accepted

answered on 13 Sep 2011, 06:55 PM

After additional investigation (and using a different debugger) I've discovered that the javascript changes do get rendered, just not where I expected to see them get rendered.

I had been using IE8 developer tools and Firebug to look at the generated html and script, and the changes did not show up in the original location in either of them. The script and DOM showed no changes after the ajaxified callback. However when I used Firebug to search for one of the values in the changed javascript I found it - in a ScriptResource.axd file! Apparently when RadAjaxManager intercepts the postback and sees the RadScriptBlock that is what it does with it.

After adding some alerts to my javascript code I can verify that the changed javascript code is rendered and executed, and my new variable values are available on the client side! Hurrah!

Lesson learned: Don't always trust your debugger! Especially when using RadAjaxManager, changes to your DOM or javascript may not show up where you expect them to! Search for the changes in all files, or add a few alerts to verify that things are working correctly.

This issue is closed with me feeling rather sheepish, but you might want to leave it here in case someone else has the same problem.