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(" ").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>
</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" />
<asp:TextBox ID="tbSubUpdate" runat="server" Text="Update me"></asp:TextBox>
</asp:Panel>
</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>
2 Answers, 1 is accepted
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
Rank 1