Can't click links and Cufon doesn't work after RadAjaxManager refreshes

3 posts, 0 answers
  1. Mark
    Mark avatar
    8 posts
    Member since:
    Nov 2008

    Posted 16 Nov 2010 Link to this post

    I have a content page that I am using in an application to add new clients and list all clients. 

    When a user adds a new client (by click a button #addNewClient) I want the RadAjaxManager to refresh the ListView and for the container (#newClientContainer) that contains the controls to add a new client to be hidden. I am using jQuery to show/hide #newClientContainer.

    This is working to an extent, however when the RadAjaxManager refreshes I loose the ability to click any of the links in the #newClientContainer.  Furthermore, I am using Cufon to replace the h1 element.  After the RadAjaxManger refreshes Cufon stops working.

    I have tried using #listViewContainer and #newClientContainer as the AjaxUpdatedControl, but I still loose the ability to click links.

    Here is the code for the page. Any ideas?
    <asp:Content ID="Content1" ContentPlaceHolderID="headerContentPlaceholder" runat="Server">
        <script type="text/javascript">
            $(document).ready(function () {
                $('#addNewClient').click(function () {
                    $('#addNewClient').attr("disabled", true);
                    $('#mainContentPlaceholder_newClientContainer').slideDown(function () {
                        $('#mainContentPlaceholder_newClientContainer').show();
                    });
                });
                $('#cancel').click(function () {
                    $('#addNewClient').removeAttr("disabled");
                    $('#mainContentPlaceholder_newClientContainer').slideUp();
                });
            });       
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="mainContentPlaceholder" runat="Server">
        <div id="leftContainer" runat="server">
            <h1>
                Clients
            </h1>
            <uc1:Notifications ID="notifications" runat="server" />
            <div id="navigation">
                <a id="addNewClient" href="#" class="button hex2C608F">Add New Client</a>
            </div>
            <div id="newClientContainer" class="extra-b5" runat="server">
                <table class="clientDetailsTable" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <h4 class="extra-b5">
                                Client Details</h4>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="clientNameLabel" runat="server" Text="Client Name" /><br />
                            <asp:TextBox ID="clientNameTextBox" runat="server" CssClass="textbox short" MaxLength="50" />
                            <asp:RequiredFieldValidator ID="clientNameRequiredValidator" runat="server" ErrorMessage="Please enter a client name."
                                Display="None" ControlToValidate="clientNameTextBox" ValidationGroup="newClientGroup" />
                        </td>
                        <td>
                            <asp:Label ID="themeLabel" runat="server" Text="Theme" /><br />
                            <asp:DropDownList ID="themeDropDownList" runat="server" AppendDataBoundItems="true"
                                CssClass="short">
                                <asp:ListItem Value="-1">-- Please Select --</asp:ListItem>
                            </asp:DropDownList>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Button ID="addClientButton" runat="server" Text="Add" OnClick="addClientButton_Click"
                                ValidationGroup="newClientGroup" />
                            or <a id="cancel" href="#">Cancel</a>
                        </td>
                    </tr>
                </table>
                <asp:ValidationSummary ID="newClientValidationSummary" runat="server" ShowMessageBox="true"
                    ShowSummary="false" ValidationGroup="newClientGroup" />
            </div>
            <div id="listViewContainer" runat="server">
                <asp:ListView ID="clientsListView" runat="server">
                    <LayoutTemplate>
                        <ul class="list1">
                            <div id="itemPlaceholder" runat="server" class="list1">
                            </div>
                        </ul>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <li value='<%# Eval("Id") %>'>
                            <%# Eval("Name") %><div class="options">
                                <a href="ClientDetails.aspx?ClientId=<%# Eval("Id") %>">Edit</a><span class="separator">|</span><a
                                    href="ManageClients.aspx?ClientId=<%# Eval("Id") %>" onclick="return confirm('Are you sure you want to delete this client?')">Delete</a></div>
                        </li>
                    </ItemTemplate>
                </asp:ListView>
            </div>
        </div>
        <div id="rightContainer" runat="server">
            <h1>
                Placeholder
            </h1>
            <h4 class="extra-b12">
                Integer in metus sapien.</h4>
            <p>
                Praesent diam tellus, congue nec pellentesque dictum, convallis non dui. Nam tincidunt
                tempor lectus quis placerat. Pellentesque habitant morbi tristique senectus et netus
                et malesuada fames ac turpis egestas. Proin condimentum posuere nisl, ut mollis
                metus mollis at.</p>
            <p>
                Integer in metus sapien. Maecenas aliquet porttitor nisl, a rhoncus ligula pellentesque
                at. Maecenas tempor odio ut dolor pharetra faucibus. Cras in massa a odio vulputate
                ultricies ac non purus. Etiam in orci nibh, quis dictum ante. In hac habitasse platea
                dictumst.</p>
        </div>
        <telerik:RadScriptManager ID="radScriptManager" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="radAjaxManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="addClientButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="leftContainer" LoadingPanelID="radAjaxLoadingPanel" />
                //<telerik:AjaxUpdatedControl ControlID="listViewContainer" LoadingPanelID="radAjaxLoadingPanel" />
                //<telerik:AjaxUpdatedControl ControlID="newClientContainer" LoadingPanelID="radAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" Skin="Vista">
        </telerik:RadAjaxLoadingPanel>
    </asp:Content>

  2. Mark
    Mark avatar
    8 posts
    Member since:
    Nov 2008

    Posted 16 Nov 2010 Link to this post

    I got around this issue by using the OnResponseEnd client-side event handler to reload the cufon and jQuery.

    http://www.telerik.com/help/aspnet-ajax/ajxonresponseend.html
  3. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 16 Nov 2010 Link to this post

    Hi Mark,

    We are glad you have mentioned to find solution on your side.
    Do let us know if further help is needed.


    Sincerely yours,
    Maria Ilieva
    the Telerik team

    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top