Update a singel control in a updated panel

3 posts, 0 answers
  1. Emiel
    Emiel avatar
    2 posts
    Member since:
    Dec 2011

    Posted 16 Dec 2011 Link to this post

    On my form all controls are in a asp panel. This panel is added to the RadAjaxManager in the UpdatedControls.  This panel contains a lot of textboxes that are validated with the jQuery validate plugin (bassistance.de). There is also a texbox that should be update form the server with a postback (the value comes from a webservice call). When the postback is done the whole main panel gets updated and my jQuery validation messages are gone. Is it possible just to update the one textbox and let the rest of the form as it is? The code sample is a test i can't get working like this.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPanelTester.aspx.cs"
        Inherits="BuckarooTester.AjaxPanelTester" ClientIDMode="Static" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" type="text/css" media="screen" href="jquery.validate.password.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
        <script src="Scripts/jquery.validate.password.js" type="text/javascript"></script>
        <script src="Scripts/jquery.metadata.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>

            <script id="validation" type="text/javascript">

                $(document).ready(function () {
                    // validate signup form on keyup and submit
                    var validator = $("#form1").validate({

                        rules: {
                            tbCompanyName: {
                                required: true,
                                minlength: 2
                            }
                        },

                        messages: {
                            tbCompanyName: {
                                required: "Bedrijsnaam verplicht",
                                minlength: jQuery.format("Minimaal {0} karakters voor bedrijfsnaam")
                            }
                        },

                        success: function (label) {
                            label.html("&nbsp;").addClass("checked");
                        }

                    });

                });
            </script>

            <telerik:RadScriptManager ID="ScriptManagerMaster" runat="server" EnableScriptGlobalization="True">
            </telerik:RadScriptManager>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="pOrder">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="pMain">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="pMain" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="pSub" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"
                AnimationDuration="500">
            </telerik:RadAjaxLoadingPanel>

            <asp:Panel ID="pMain" runat="server" Height="100%">
                <table style="width: 500px; height: 100px; background-color: #FFFFCC;">
                    <tr>
                        <td align="left" style="width: 50px;">
                            <asp:Label ID="Label1" runat="server" Text="Bedrijfsnaam:"></asp:Label>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td align="left">
                            <asp:TextBox ID="tbCompanyName" runat="server" MaxLength="50">
                            </asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" colspan="3">
                            <asp:Panel ID="pSub" runat="server">
                                <asp:Button ID="btnUpdate" runat="server" Text="Update Button" OnClick="btnUpdate_Click" />
                                &nbsp;
                                <asp:TextBox ID="tbSubUpdate" runat="server" Text="Update me"></asp:TextBox>
                            </asp:Panel>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </div>
        </form>
    </body>
    </html>

  2. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 20 Dec 2011 Link to this post

    Hello Emiel,

    You could achieve your scenario by following the steps below:
    • Subscribe to ResponseEnd event of the RadAjaxManager
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="pOrder">
        <ClientEvents OnResponseEnd="RadAjaxManager1_ResponseEnd" />
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pMain">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pMain" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pSub" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    • In the ResponseEnd function call validate function so it can apply the validation messages again

     

    function RadAjaxManager1_ResponseEnd(sender, eventArgs) {
        // validate signup form on keyup and submit
        var validator = $("#form1").validate({
     
            rules: {
                tbCompanyName: {
                    required: true,
                    minlength: 2
                }
            },
            messages: {
                tbCompanyName: {
                    required: "Bedrijsnaam verplicht",
                    minlength: jQuery.format("Minimaal {0} karakters voor bedrijfsnaam")
                }
            },
            success: function (label) {
                label.html(" ").addClass("checked");
            }
        });
    }

     


    Best wishes,
    Antonio Stoilkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. Emiel
    Emiel avatar
    2 posts
    Member since:
    Dec 2011

    Posted 21 Dec 2011 Link to this post

    This works fine. I have my validation messages back after a postback. Thanks.
Back to Top