"Preview Area" in UpdatePanel not Refreshing

Question

Greetings!

I have a "code builder" page where users select various radio buttons and it generate HTML markup (mostly SCRIPT tags) that they can use on their page to display some data. There is also a "preview" area so they can see the results before they copy/paste the code in their site. The form exists in a FormView control and is wrapped by an UpdatePanel like so:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:FormView ID="FormView1" runat="server" DataSourceId="XmlDataSource1">
            <ItemTemplate>
                <div id="configArea">
                    <ul>
                        <li>
                            <%# XPath("Steps/Step1/ServerStatus") %><br />
                            <asp:RadioButton ID="RadioButton1" runat="server" GroupName="OneA" Checked="true" AutoPostBack="true" Text='<%# XPath("Steps/Step1/YesOption") %>' />
                            <asp:RadioButton ID="RadioButton2" runat="server" GroupName="OneA" AutoPostBack="true" Text='<%# XPath("Steps/Step1/NoOption") %>' />
                        </li>
                        <li>
                            <%# XPath("Steps/Step1/Uptime") %><br />
                            <asp:RadioButton ID="RadioButton3" runat="server" GroupName="OneB" Checked="true" AutoPostBack="true" Text='<%# XPath("Steps/Step1/YesOption") %>' />
                            <asp:RadioButton ID="RadioButton4" runat="server" GroupName="OneB" AutoPostBack="true" Text='<%# XPath("Steps/Step1/NoOption") %>' />
                        </li>
                        <li>
                            <%# XPath("Steps/Step1/IPAddress") %><br />
                            <asp:RadioButton ID="RadioButton5" runat="server" GroupName="OneC" Checked="true" AutoPostBack="true" Text='<%# XPath("Steps/Step1/YesOption") %>' />
                            <asp:RadioButton ID="RadioButton6" runat="server" GroupName="OneC" AutoPostBack="true" Text='<%# XPath("Steps/Step1/NoOption") %>' />
                        </li>
                    </ul>
                </div>
                <div id="copyCode">
                    <%# XPath("Steps/Step2/CopyPasteCode") %><br />
                    <asp:TextBox ID="Textbox1" runat="server" TextMode="MultiLine" Width="300" Height="300" />
                </div>
                <div id="previewArea">
                    <%# XPath("Steps/Step3/PreviewTitle") %><br />
                    <asp:Literal ID="Literal1" runat="server" />
                </div>
            </ItemTemplate>
        </asp:FormView>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="Root/Data" />

It successfully generates the code in the copycode TextBox (TextBox1), which may look something like this:

<script src="http://example.com/src/Constants.js"&gt;&lt;/script&gt;
<script>
    showIPAddress = 0;
    DisplayServerStatus();
</script>

At the same time, I update the "preview" area's Literal control (Literal1) with the text from the copycode TextBox (TextBox1). The preview is displayed perfectly when not inside an UpdatePanel, but does not work when it is (and I'd prefer to use an UpdatePanel to prevent page refreshing). I do the update of the "preview" area and copycode text during the PreRender event:

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);

    UpdateCodeSnippetAndPreviewArea();
}

Any ideas why the preview doesn't update when it's in an UpdatePanel?

Answer 1

Hi,

The reason it is not updating when using an UpdatePanel is that the ASP .NET AJAX framework does not process any inline javascript returned by the server. Look at using the ScriptManager.RegisterStartUpScript method on the server side to register execution of inline javascript. Essentially you could use this method to initiate execution of custom javascript once the panel is updated. In your case, your custom javascript would need to interpret the preview script appropriately (i.e. detect script tags, register them dynamically then execute the given functions).

Hope this helps!

Rohland