RadAjaxLoadingPanel does not works with DNN

Question

I have a dnn site, which has a label and an imagebutton, clicking on which replaces the label with textbox and user can enter their text, once submitted the label will be updated with this text.

Now clicking on the imagebutton causes the page to postback, i don't want a postback for this, hence i have placed telerik RadAjaxLoadingPanel control, so the cool loading div gets displayed while processing is going on, but for some reason it's not working,

It always throws below error:

Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error.

Below is the markup of my page: (I tried the wrapping the code with RadScriptBlock and RadCodeBlock, in both case it throws same error as above)

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
                </telerik:RadAjaxLoadingPanel>
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                <a class="subscribetoday" href="#">
                    <strong>Subscribe Today!</strong> <asp:Label ID="lblsubscribemsg" runat="server" Text="12 issues for $14.95"></asp:Label> 
<asp:ImageButton ID="imgEditSubscribe" runat="server"
                                            OnClick="imgEditSubscribe_Click" ToolTip='Edit' ImageUrl="~/images/edit.gif" AlternateText='Edit' Visible="false" />
                <div id="editsubscribe" runat="server" visible="false">
                    <asp:TextBox ID="txtSubscribe" runat="server"></asp:TextBox> <asp:ImageButton ID="imgSave" runat="server"
                                            OnClick="imgSave_Click" OnClientClick="return validateSubscribeNote();" ToolTip='Save' ImageUrl="~/images/save.gif" AlternateText='Save' /> <asp:ImageButton ID="imgCancel" runat="server"
                                            OnClick="imgCancel_Click" ToolTip='Cancel' ImageUrl="~/images/cancel.gif" AlternateText='Cancel' />

                </div>
          <img src="img/prosound-subscribe.png" alt="Subscribe Today!">
                </a>
                </telerik:RadScriptBlock>
                </telerik:RadAjaxPanel>

Can anyone tell me where i am going wrong with this.

Answer 1

The problem is with other server code blocks on the page (<%=%> for example, generally - <% ... %>), not with this concrete piece of code you are trying to AJAX-enable. You can read more here: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radcodeblock-and-radscriptblock

So, you should find the place where those code blocks are used and wrap THEM in a RadCodeBlock controls. It is often scripts that reference controls, e.g.:

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
    <script>
        function getReference() {
            return $find("<%=someControl.ClientID%>");
        }
    </script>
</telerik:RadCodeBlock>

With DNN, however, I cannot say where these may originate.

Thus, your other option is to use an <asp:UpdatePanel> control to get AJAX requests instead of full postbacks. The native AJAX toolset also offers the <asp:UpdateProgress> control that you can use instead of RadAjaxPanel.