Bilawal Niaz

Bilawal Niaz

  • NA
  • 110
  • 16.5k

AjaxToolkit:ValidatorCalloutExtender not working

Jun 13 2016 1:36 PM
ValidatorCalloutExtender not working inside the updatepanel why?
 
any one resolve my issue? 
 
 
the code is :
 
 
 
<%@ Page Title="" Language="C#" MasterPageFile="~/CRMS.Master" AutoEventWireup="true" CodeBehind="MissingPersonDetail.aspx.cs" Inherits="CRMS1.AddMissingPersonDetail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
<asp:ScriptReference Path="~/Scripts/AjaxControlToolkit/Bundle" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
<section class="about-us-area">
<!--About Upper-->
<div class="about-upper">
<div class="auto-container">
<div class="sec-title wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1000ms">
<h2><span>Add Missing Person's Detail</span></h2>
</div>
</div>
</div>
</section>
<div class="container" id="columns">
<asp:Panel ID="Panel1" runat="server">
<div style="width:500px; height:70px; margin-left:auto; margin-right:auto; background-color:#cfffaa; text-align:center; padding-top:15px; border-radius:15px;">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
</asp:Panel>
<br />
<center>
<div class="box-authenticationCitizen">
<table>
<tr> <td>Full Name :</td>
<td style="width: 235px">
&nbsp;<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>
<br />
<asp:RequiredFieldValidator runat="server" ID="NReq"
ControlToValidate="TextBox2"
Display="None"
SetFocusOnError="true"
ErrorMessage="<b>Required Field Missing</b><br />Full Name Is Required." />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="NReqE"
TargetControlID="NReq"
HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr> <td>Father Name :</td>
<td style="width: 235px">
<asp:TextBox ID="TextBox3" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator2"
ControlToValidate="TextBox3"
Display="None" DisplayOnClick="true"
SetFocusOnError="true"
ErrorMessage="<b>Required Field Missing</b><br />Father Name Is Required." />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender1"
TargetControlID="RequiredFieldValidator2"
HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr>
<td><br />CNIC :</td>
<td style="width: 250px">
&nbsp;<asp:TextBox ID="TextBox4" runat="server" CssClass="form-control" Width="220px" Height="40px" AutoPostBack="True" OnTextChanged="TextBox4_TextChanged"></asp:TextBox>
</td>
<td style="width:5px">
<asp:Panel ID="Panel4" runat="server" Width="24px">
<img alt="as" src="Images/success.gif" style="width: 16px; height: 16px; vertical-align:baseline; float:left;" />
</asp:Panel>
<asp:Panel ID="Panel5" runat="server">
<img alt="asa" src="Images/error.gif" style="width: 16px; height: 16px; vertical-align:baseline; float:left;" />
</asp:Panel>
</td>
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
TargetControlID="TextBox4"
Mask="99999/9999999/9"
MaskType="Number"
ClearMaskOnLostFocus="False" />
<asp:RegularExpressionValidator runat="server" ID="PNRegEx"
ControlToValidate="TextBox4"
Display="None"
ValidationExpression="\d{5}-\d{7}-\d{1}"
ErrorMessage="<b>Invalid Field</b><br />Please Enter A CNIC Number In The Format:<br />12345-1234567-1" SetFocusOnError="True" />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqEx"
TargetControlID="PNRegEx"
HighlightCssClass="validatorCalloutHighlight" />
</tr>
<tr>
<td>
<br />
Gender :</td>
<td style="width: 235px">
<br />
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" Width="240px">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Fe-Male</asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator5"
ControlToValidate="RadioButtonList1"
Display="None" DisplayOnClick="true"
SetFocusOnError="true"
ErrorMessage="<b>Required Field Missing</b><br />Please Select Gender." />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender3"
TargetControlID="RequiredFieldValidator5"
HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr> <td>Date Of Birth :</td>
<td style="width: 235px">
&nbsp;<asp:TextBox ID="TextBox5" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>
<em>&nbsp; (Click Image Button To Select DOB)</em>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator6"
ControlToValidate="TextBox5"
Display="None" DisplayOnClick="true"
SetFocusOnError="true"
ErrorMessage="<b>Required Field Missing</b><br>Date Of Birth Required.<br />Click Image Button To Select Date Of Birth." />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender4"
TargetControlID="RequiredFieldValidator6"
HighlightCssClass="validatorCalloutHighlight" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator3"
ControlToValidate="TextBox5"
Display="None"
ValidationExpression="\d{2}/\d{2}/\d{4}"
ErrorMessage="<b>Invalid Field</b><br />Please Enter A Correct Date Of Birth" SetFocusOnError="True" />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender6"
TargetControlID="RegularExpressionValidator3"
HighlightCssClass="validatorCalloutHighlight" />
<br />
</td>
<td style="width:5px">
<asp:ImageButton runat="Server" ID="Image1" ImageUrl="~/Images/Calendar_scheduleHS.png" Image AlternateText="Click to show calendar" />
<ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server" TargetControlID="TextBox5" Format="dd/MM/yyyy" PopupButtonID="Image1" />
</td>
</tr>
<tr>
<td>
<br />
Nationality :</td>
<td style="width: 235px">
<br />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="NationalityName" DataValueField="NationalityId" Height="45px" Width="220px" CssClass="form-control" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT * FROM [Nationality]"></asp:SqlDataSource>
</td>
<td style="width: 5px">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Select Nationality" ControlToValidate="DropDownList1" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<img alt="as" src="Images/loader1.gif" style="width: 60px; height: 60px" />
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
<tr> <td>
<br />
Province :</td> <td style="width: 235px">
&nbsp;<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource2" DataTextField="ProvinceName" DataValueField="ProvinceId" Height="45px" Width="220px" CssClass="form-control">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT Province.ProvinceName, Province.ProvinceId FROM Province INNER JOIN Nationality ON Province.NationalityId = Nationality.NationalityId WHERE (Province.NationalityId = @NationalityId)">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" Name="NationalityId" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
</td>
<td style="width: 5px">
<asp:RequiredFieldValidator ID="RequiredFieldValidator17" runat="server" ControlToValidate="DropDownList2" ErrorMessage="Select Province" ForeColor="#FF9900" InitialValue="2" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr> <td>
<br />
City :</td> <td style="width: 235px">
&nbsp;<asp:DropDownList ID="DropDownList3" runat="server" DataSourceID="SqlDataSource3" DataTextField="CityName" DataValueField="CityId" Height="45px" Width="220px" AutoPostBack="True" CssClass="form-control">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT City.CityId, City.CityName FROM City INNER JOIN Province ON City.ProvinceId = Province.ProvinceId WHERE (Province.NationalityId = @NationalityId) AND (City.ProvinceId = @ProvinceId)">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" Name="NationalityId" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="DropDownList2" Name="ProvinceId" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
</td>
<td style="width: 5px">
<asp:RequiredFieldValidator ID="RequiredFieldValidator18" runat="server" ControlToValidate="DropDownList3" ErrorMessage="Select City" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr> <td>
<br />
Area :</td> <td style="width: 235px">
&nbsp;<asp:DropDownList ID="DropDownList4" runat="server" DataSourceID="SqlDataSource4" DataTextField="AreaName" DataValueField="AreaId" AutoPostBack="True" CssClass="form-control" Height="45px" Width="220px">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT Area.AreaId, Area.AreaName FROM Area INNER JOIN City ON Area.CityId = City.CityId INNER JOIN Province ON Area.ProvienceId = Province.ProvinceId AND City.ProvinceId = Province.ProvinceId WHERE (Area.CityId = @CityId) AND (City.ProvinceId = @ProvinceId)">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList3" Name="CityId" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="DropDownList2" Name="ProvinceId" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
</td>
<td style="width: 5px">
<asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="DropDownList4" ErrorMessage="Select Area" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr> <td>
<br />
Police Station :&nbsp; </td> <td style="width: 235px">
&nbsp;<asp:DropDownList ID="DropDownList7" runat="server" DataSourceID="SqlDataSource7" DataTextField="PoliceStationName" DataValueField="PoliceStationId" CssClass="form-control" Height="45px" Width="220px">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource7" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT PoliceStation.PoliceStationId, PoliceStation.PoliceStationName FROM PoliceStation INNER JOIN Area ON PoliceStation.AreaId = Area.AreaId INNER JOIN City ON PoliceStation.CityId = City.CityId AND Area.CityId = City.CityId WHERE (PoliceStation.AreaId = @AreaId) AND (Area.CityId = @CityId)">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList4" Name="AreaId" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="DropDownList3" Name="CityId" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
</td>
<td style="width: 5px">
<asp:RequiredFieldValidator ID="RequiredFieldValidator22" runat="server" ControlToValidate="DropDownList7" ErrorMessage="Select Police Station" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr> <td>
<br />
Religion :</td> <td style="width: 235px">
<br />
<asp:DropDownList ID="DropDownList5" runat="server" DataSourceID="SqlDataSource5" DataTextField="ReligionName" DataValueField="ReligionId" Height="45px" Width="220px" CssClass="form-control">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT * FROM [Religion]"></asp:SqlDataSource>
</td>
<td style="width: 5px">
<asp:RequiredFieldValidator ID="RequiredFieldValidator19" runat="server" ControlToValidate="DropDownList5" ErrorMessage="Select Religion" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr> <td>Job :</td> <td style="width: 235px">
<br />
<asp:DropDownList ID="DropDownList6" runat="server" CssClass="form-control" DataSourceID="SqlDataSource6" DataTextField="JobName" DataValueField="JobId" Height="45px" Width="220px">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource6" runat="server" ConnectionString="<%$ ConnectionStrings:CRMSConnectionString %>" SelectCommand="SELECT * FROM [Job]"></asp:SqlDataSource>
&nbsp;<br />
</td>
<td style="width: 5px">
<asp:RequiredFieldValidator ID="RequiredFieldValidator20" runat="server" ControlToValidate="DropDownList6" ErrorMessage="Select Job" ForeColor="#FF9900" InitialValue="1" SetFocusOnError="True" ValidationGroup="one">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr> <td>Age :</td>
<td style="width: 235px">
<asp:TextBox ID="TextBox6" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator7"
ControlToValidate="TextBox6"
Display="None" DisplayOnClick="true"
SetFocusOnError="true"
ErrorMessage="<b>Required Field Missing</b><br />Age Is Required." />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender5"
TargetControlID="RequiredFieldValidator7"
HighlightCssClass="validatorCalloutHighlight" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1"
ControlToValidate="TextBox6"
Display="None"
ValidationExpression="\d{2}"
ErrorMessage="<b>Invalid Field</b><br />Please Enter A Correct Age" SetFocusOnError="True" />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender2"
TargetControlID="RegularExpressionValidator1"
HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr> <td>Missing Date :</td>
<td style="width: 235px">
&nbsp;<asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>
<em>&nbsp; (Click Image Button To Select DOB)</em>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator3"
ControlToValidate="TextBox1"
Display="None" DisplayOnClick="true"
SetFocusOnError="true"
ErrorMessage="<b>Required Field Missing</b><br>Missing Date Required.<br />Click Image Button To Select Missing Date." />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender7"
TargetControlID="RequiredFieldValidator3"
HighlightCssClass="validatorCalloutHighlight" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator4"
ControlToValidate="TextBox1"
Display="None"
ValidationExpression="\d{2}/\d{2}/\d{4}"
ErrorMessage="<b>Invalid Field</b><br />Please Enter A Correct Date" SetFocusOnError="True" />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender8"
TargetControlID="RegularExpressionValidator4"
HighlightCssClass="validatorCalloutHighlight" />
</td>
<td style="width:5px">
<asp:ImageButton runat="Server" ID="ImageButton1" ImageUrl="~/Images/Calendar_scheduleHS.png" Image AlternateText="Click to show calendar" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" Format="dd/MM/yyyy" PopupButtonID="ImageButton1" />
</td>
</tr>
<tr>
<td>
<br />
Missing Time :</td>
<td style="width: 235px">
<br />
<asp:TextBox ID="TextBox7" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender3" runat="server"
TargetControlID="TextBox7"
Mask="99:99"
MaskType="Time"
AcceptAMPM="True" ClearMaskOnLostFocus="False" />
</td>
</tr>
<tr>
<td>
<br />
Missing Place :</td> <td style="width: 235px">
<br />
<asp:TextBox ID="TextBox8" runat="server" CssClass="form-control" Width="220px" Height="60px" TextMode="MultiLine"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator4"
ControlToValidate="TextBox8"
Display="None" DisplayOnClick="true"
SetFocusOnError="true"
ErrorMessage="<b>Required Field Missing</b><br>Missing Place Required." />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender9"
TargetControlID="RequiredFieldValidator4"
HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr>
<td>
<br />
Phone Number :</td> <td style="width: 235px">
&nbsp;<asp:TextBox ID="TextBox9" runat="server" CssClass="form-control" Width="220px" Height="40px"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender2" runat="server"
TargetControlID="TextBox9"
Mask="9999/9999999"
MaskType="Number"
ClearMaskOnLostFocus="False" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator5"
ControlToValidate="TextBox9"
Display="None"
ValidationExpression="\d{4}-\d{7}"
ErrorMessage="<b>Invalid Field</b><br />Please Enter A Phone Number In The Format:<br />0321-1234567" SetFocusOnError="True" />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender12"
TargetControlID="RegularExpressionValidator5"
HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr>
<td>
<br />
Address :</td> <td style="width: 235px">
&nbsp;<asp:TextBox ID="TextBox10" runat="server" Height="80px" TextMode="MultiLine" Width="220px" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator8"
ControlToValidate="TextBox10"
Display="None" DisplayOnClick="true"
SetFocusOnError="true"
ErrorMessage="<b>Required Field Missing</b><br>Address Is Required." />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender10"
TargetControlID="RequiredFieldValidator8"
HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr>
<td><br />Image :</td>
<td style="width: 235px">
&nbsp;<asp:FileUpload ID="FileUpload1" runat="server" CssClass="form-control" Height="40px" Width="220px" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator9"
ControlToValidate="FileUpload1"
Display="None" DisplayOnClick="true"
SetFocusOnError="true"
ErrorMessage="<b>Required Field Missing</b><br>Image Is Required." />
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender11"
TargetControlID="RequiredFieldValidator9"
HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr> <td>
&nbsp;</td> <td style="width: 235px">
<br />
<asp:Button ID="Button1" runat="server" Text="Add Missing Person Detail" Height="40px" Width="220px" OnClick="Button1_Click" CssClass="btn-warning" />
</td></tr>
</table>
</div>
</center>
<br />
</div>
</ContentTemplate></asp:UpdatePanel>
</asp:Content>
 

Answers (2)