locked
Why asp.net textbox loses jquery masking upon postback ? RRS feed

  • Question

  • User-886220824 posted

    I have asked this question many time at different intervals at different forums but nothing helped me out but in hope I am posting it again. Please help.

    I have applied JqueryMasking to a textbox i.e. NIC masking. It works when Page loads initially but stop working when postback occurs i.e. no mask is applied then. Why ?

    jQuery(function ($) {
    
         $("#txtBoxComplainantCNIC").mask("99999-9999999-9", { placeholder: "" });
            });

    textbox:

     <asp:TextBox ID="txtBoxComplainantCNIC" runat="server" onkeypress="return isNumberKeyCNIC(this)" ClientIDMode="Static" placeholder="XXXXX-XXXXXXX-X" MaxLength="15" CssClass="form-control"></asp:TextBox>

    Textbox resides in UpdatePanel.

    Monday, January 11, 2016 8:22 PM

All replies

  • User1124521738 posted

    postback of an UpdatePanel doesn't fire the jquery again - the page at large has already loaded.  you'll have to bind the function to the partial refresh event - kinda like this:

    <script type="text/javascript">
    
    	function UpdateAjaxMaskJQuery() {
    		if (typeof (Sys) != 'undefined') {
    			var prm = Sys.WebForms.PageRequestManager.getInstance();
    			prm.add_endRequest(function () {
    				ButtonMaskFn();
    			});
    		}
    	}
    
    	$(document).ready(function () {
    		UpdateAjaxMaskJQuery();
    		ButtonMaskFn();
    	});
    	
    	function ButtonMaskFn() {
    		$("#txtBoxComplainantCNIC").mask("99999-9999999-9", { placeholder: "" });
    	}
    	
    </script>

    also, you may wish to consider $("#<%=txtBoxComplainantCNIC.ClientID %>") over hardcoding a client side string in case the code ever gets put with a master page or in a user control as the name will get changed in the resulting html from what the control's ID is in the designer.

    Monday, January 11, 2016 8:30 PM
  • User-886220824 posted

    hey there, I tried but it's not working, not even on page load

    Monday, January 11, 2016 8:36 PM
  • User1124521738 posted

    what error messages did you get? did you double up the script tags by accident?

    Monday, January 11, 2016 8:45 PM
  • User-886220824 posted

    Uncaught TypeError: $(...).mask is not a function

    Uncaught SyntaxError: Unexpected token .

    Monday, January 11, 2016 9:06 PM
  • User1124521738 posted

    is jquery included outside the update panel?

    is the new code outside the update panel but after the jquery include?

    you can also try changing the mask method to this:

    function ButtonMaskFn() {
         jQuery(function ($) {
              $("#txtBoxComplainantCNIC").mask("99999-9999999-9", { placeholder: "" });
          });
    }

    Monday, January 11, 2016 9:14 PM
  • User61956409 posted

    Hi StackUnderflow,

    Firstly, are you using UpdatePanel? And could you share us more relevant code? We will reproduce your problem based on your code.

    Secondly, this article provided solution for jQuery Plugins not working after ASP.Net AJAX UpdatePanel Partial PostBack or when Asynchronous request is over, you could refer to it.

    http://www.aspsnippets.com/Articles/jQuery-Plugins-not-working-after-ASPNet-AJAX-UpdatePanel-Partial-PostBack-or-when-Asynchronous-request-is-over.aspx

    Best Regards,

    Fei Han

    Tuesday, January 12, 2016 8:42 AM
  • User-886220824 posted

    this the whole code sir

    <%@ Page Title="" Language="C#" MasterPageFile="~/home/MasterPage.master" AutoEventWireup="true" CodeFile="EmployeeInfo.aspx.cs" Inherits="DataManagement_PersonalInformation" %>
    
    <%@ Register Src="~/Controls/ResultLabel.ascx" TagPrefix="uc1" TagName="ResultLabel" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
    .modalBackground {
    background-color: Black;
    filter: alpha(opacity=90);
    opacity: 0.8;
    }
    
    .modalPopup {
    background-color: whitesmoke;
    border-width: 0px;
    border-style: solid;
    border-color: black;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 600px;
    height: 280px;
    }
    </style>
    
    <script src="../assets/global/plugins/datatables/dynamic/docs/media/js/jquery.js"></script>
    <script src="../assets/global/plugins/input-mask/dist/jquery.maskedinput.js"></script>
    
    <script type="text/javascript">
    function Clear() {
    location.reload(true);
    
    }
    
    function GetConfrim() {
    if (confirm("Are you sure ?")) {
    return true;
    } else {
    return false;
    }
    }
    
    function ShowFull(ctrl) {
    ctrl.style.height = '280px';
    ctrl.style.width = '280px';
    }
    
    function ShowActual(ctrl) {
    ctrl.style.height = '20px';
    ctrl.style.width = '20px';
    }
    
    function isNumberKeyCNIC(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 45)
    return false;
    
    return true;
    }
    
    function isNumberKeyContactNo(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 43)
    return false;
    
    return true;
    }
    
    function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
    
    return true;
    }
    
    jQuery(function ($) {
    $("#txtBoxNICNo").mask("99999-9999999-9", { placeholder: "", clearOnLostFocus: });
    //$("#txtBoxPhoneOffice").mask("+99-99-9999999", { placeholder: "" });
    //$("#txtBoxPhoneResidence").mask("+99-99-9999999", { placeholder: "" });
    //$("#txtBoxMobile").mask("+99-999-9999999", { placeholder: "" });
    });
    
    </script>
    
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    
    $(function () {
    $("#<%= txtBoxDateOfBirth.ClientID %>").datepicker({ dateFormat: "dd/M/yy" });
    $("#<%= txtBoxInitialFromDate.ClientID %>").datepicker({ dateFormat: "dd/M/yy" }); 
    $("#<%= txtBoxDateTo.ClientID %>").datepicker({ dateFormat: "dd/M/yy" }); 
    $("#<%= txtBoxFromDate.ClientID %>").datepicker({ dateFormat: "dd/M/yy" }); 
    $("#<%= txtBoxToDate.ClientID %>").datepicker({ dateFormat: "dd/M/yy" });
    });
    </script>
    
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:UpdateProgress AssociatedUpdatePanelID="UpdatePanel1" runat="server" ID="UpdateProgress1">
    <ProgressTemplate>
    <div class="ajax-loading">
    <div></div>
    </div>
    
    </ProgressTemplate>
    </asp:UpdateProgress>
    
    <%--<asp:Timer runat="server" id="UpdateTimer" Enabled="false" interval="1500" OnTick="UpdateTimer_Tick" />--%>
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <div class="page-content">
    <center> 
    <asp:Panel ID="ResultPanel" runat="server">
    </asp:Panel>
    </center>
    
    <div class="panel-header bg-primary" style="height: 60px;">
    <div class="container" style="padding-top: 12px; padding-left: 6px;">
    <asp:Button ID="btnShowViewPersonalInfo" runat="server" OnClick="btnShowViewPersonalInfo_Click" Text="Personal Info" CssClass="btn-lg " />
    <asp:Button ID="btnShowViewQualifications" runat="server" OnClick="btnShowViewQualifications_Click" Text="Qualifications" CssClass="btn-lg " />
    <asp:Button ID="btnShowViewTrainingsCourses" runat="server" OnClick="btnShowViewTrainingsCourses_Click" Text="Trainings/Courses" CssClass="btn-lg " />
    <asp:Button ID="btnShowViewServiceInfo" runat="server" OnClick="btnShowViewServiceInfo_Click" Text="Service Info" CssClass="btn-lg " />
    <asp:Button ID="btnEmployeeActivated" runat="server" Visible="false" OnClick="btnEmployeeActivated_Click" CssClass="btn btn-rounded pull-right" Style="color: whitesmoke; margin-right: 201px" />
    </div>
    </div>
    
    <asp:HiddenField ID="hdnField1" runat="server" />
    <asp:ModalPopupExtender ID="mdlMessageBox" BackgroundCssClass="modalBackground" runat="server" TargetControlID="hdnField1"
    PopupControlID="pnlMessageBox">
    </asp:ModalPopupExtender>
    <asp:Panel ID="pnlMessageBox" CssClass="modalPopup" Style="height: 191px; width: 501px; left: 520px" runat="server" HorizontalAlign="Center" Visible="false">
    <div class="panel-header bg-success" style="height: 41px; padding-top: 1px; padding-left: 5px;">
    <h4>Result</h4>
    <asp:Button ID="btnCloseModal" Text="X" runat="server" CausesValidation="false" OnClick="btnCloseModal_Click"
    CssClass="btn btn-primary pull-right btn-sm" Style="margin-top: -37PX; margin-right: 4px; color: whitesmoke; background-color: tomato" />
    </div>
    <h2 style="padding-top: 25px">
    <asp:Label runat="server" ID="lblMsgBoxInnerText" /></h2>
    </asp:Panel>
    
    <asp:MultiView ID="MultiviewHR" runat="server" ActiveViewIndex="0">
    <asp:View ID="View0" runat="server">
    <asp:Panel ID="pnlAddPersonalInfo" runat="server" DefaultButton="btnAddPersonalInformation" class="row">
    <div class="col-lg-12">
    </div>
    <div class="col-md-12">
    <div class="panel">
    <div class="panel-content">
    <div class="col-md-12">
    <asp:HiddenField ID="HdnFieldPersonalInformationID" runat="server" />
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    NIC No
    </label>
    <asp:TextBox ID="txtBoxNICNo" runat="server" onkeypress="return isNumberKeyCNIC(this)" ClientIDMode="Static" placeholder="XXXXX-XXXXXXX-X" MaxLength="15" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Name 
    </label>
    <asp:TextBox ID="txtBoxName" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Father/Husband Name 
    </label>
    <asp:TextBox ID="txtBoxFatherHusbandName" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Date of Birth
    </label>
    <asp:TextBox ID="txtBoxDateOfBirth" runat="server" placeholder="e.g. 01/Jan/1900" CssClass="form-control"></asp:TextBox>
    <asp:CalendarExtender ID="calExt1" runat="server" Format="dd/MMM/yyyy" TargetControlID="txtBoxDateOfBirth">
    </asp:CalendarExtender>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Gender
    </label>
    <asp:DropDownList ID="ddlGender" runat="server" CssClass="form-control white">
    <asp:ListItem Text="-Select-" Value="-1"></asp:ListItem>
    <asp:ListItem Text="Male" Value="1"></asp:ListItem>
    <asp:ListItem Text="Female" Value="0"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Religion
    </label>
    <asp:TextBox ID="txtBoxReligion" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Domicile
    </label>
    <asp:TextBox ID="txtBoxDomicile" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Phone No. Office
    </label>
    <asp:TextBox ID="txtBoxPhoneOffice" runat="server" ClientIDMode="Static"
    onkeypress="return isNumberKeyContactNo(this)" CssClass="form-control" MaxLength="14"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Phone No. Residence
    </label>
    <asp:TextBox ID="txtBoxPhoneResidence" runat="server" ClientIDMode="Static"
    onkeypress="return isNumberKeyContactNo(this)" CssClass="form-control" MaxLength="14"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Phone No. Mobile
    </label>
    <asp:TextBox ID="txtBoxMobile" runat="server" ClientIDMode="Static"
    onkeypress="return isNumberKeyContactNo(this)" CssClass="form-control" MaxLength="15"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Marital Status
    </label>
    <asp:DropDownList ID="ddlMaritalStatus" runat="server" CssClass="form-control white">
    <asp:ListItem Text="-Select-" Value="-1"></asp:ListItem>
    <asp:ListItem Text="Married" Value="1"></asp:ListItem>
    <asp:ListItem Text="Single" Value="0"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Address
    </label>
    <asp:TextBox ID="txtBoxAddress" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Email Address
    </label>
    <asp:TextBox ID="txtBoxEmailAddress" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Computer Literate
    </label>
    <asp:DropDownList ID="ddlIsComputerLiterate" runat="server" CssClass="form-control white">
    <asp:ListItem Text="-Select-" Value="-1"></asp:ListItem>
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="No" Value="0"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Picture
    </label>
    <asp:FileUpload ID="FileUpload1" runat="server" />
    <asp:HiddenField ID="HdnFieldEmployeePicture" runat="server" />
    </div>
    </div>
    </div>
    <div class="clearfix"></div>
    </div>
    <div class="panel-footer clearfix">
    <div class="pull-right">
    <asp:Button ID="btnResetPersonalInfo" runat="server" Text="Reset" OnClientClick="Clear()" OnClick="btnResetPersonalInfo_Click" CssClass="btn btn-success" />
    <asp:Button ID="btnAddPersonalInformation" ValidationGroup="0" runat="server" CssClass="btn btn-primary"
    Text="Save" OnClick="btnAddPersonalInformation_Click" />
    <asp:Button ID="btnNextPersonalInformation" ValidationGroup="0" runat="server" CssClass="btn btn-primary"
    Text="Next" OnClick="btnNextPersonalInformation_Click" />
    <asp:Button ID="btnUpdate" runat="server" CssClass="btn btn-primary"
    Text="Update" Visible="false" OnClick="btnUpdate_Click" />
    <asp:Button ID="btnReinitiate" runat="server" CssClass="btn btn-primary"
    Text="Reinitiate" Visible="false" OnClick="btnReinitiate_Click" />
    </div>
    </div>
    </div>
    </div>
    </asp:Panel>
    <asp:Panel ID="pnlSearchPersonalInfo" runat="server" DefaultButton="btnSearch" class="row">
    <div class="col-md-12">
    <div class="panel fadeIn">
    <div class="panel-header bg-success">
    <h3><i class="fa fa-search"></i>Search Personal Information </h3>
    </div>
    <div class="panel-content">
    <div class="col-md-4 ">
    <div class="input-group">
    <asp:TextBox runat="server" CssClass="form-control" ID="txtSearch" PlaceHolder="Enter Employee Name"></asp:TextBox>
    <span class="input-group-btn">
    <asp:Button runat="server" ID="btnSearch" OnClick="btnSearch_Click" CssClass="btn btn-warning" Text="Search" ValidationGroup="S" />
    </span>
    </div>
    </div>
    <asp:Panel ID="pnlGrdViewPersonalInformation" runat="server" CssClass="col-lg-12" ScrollBars="Both">
    <asp:GridView runat="server" ID="grdviewPersonalInformation" AllowPaging="true" PageSize="15" OnPageIndexChanging="grdviewPersonalInformation_PageIndexChanging"
    OnRowCommand="grdviewPersonalInformation_RowCommand" HeaderStyle-BackColor="#99CC99" DataKeyNames="pk_PersonalInfo_ID" AutoGenerateColumns="false"
    CssClass="table table-condensed table-bordered table-striped table-responsive scrollable">
    <Columns>
    <asp:BoundField DataField="pk_PersonalInfo_ID" HeaderText="S.No" />
    <asp:BoundField DataField="PersonalInfoName" HeaderText="Employee Name" />
    <asp:BoundField DataField="PersonalInfoNIC" HeaderText="NIC" />
    <asp:BoundField DataField="PersonalInfoFatherHusbandName" HeaderText="Father/Husband Name" />
    <asp:BoundField DataField="PersonalInfoDOB" HeaderText="Date of Birth" />
    <asp:BoundField DataField="PersonalInfoDomicile" HeaderText="Domicile" />
    <%-- <asp:TemplateField HeaderText="Picture">
    <ItemTemplate>
    <img src='/SiteImages/<%# Eval("PersonalInfoEmployeePicture") %>' width="20" height="20"
    onmouseover="ShowFull(this)" onmouseout="ShowActual(this)" />
    </ItemTemplate>
    </asp:TemplateField>--%>
    <asp:BoundField DataField="PersonalInfoEmailAddress" HeaderText="Email Address" />
    <asp:BoundField DataField="PersonalInfoPhoneOffice" HeaderText="Phone (Office)" />
    
    <asp:ButtonField CommandName="cmdEdit" HeaderText="Edit" ImageUrl="~/assets/global/images/shopping/edit.png" ButtonType="Image" ControlStyle-Width="25px" ControlStyle-Height="25px" />
    <asp:TemplateField HeaderText="Delete">
    <ItemTemplate>
    <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/assets/global/images/shopping/delete.png" CommandName="cmdDelete" CommandArgument='<%# Container.DataItemIndex %>' OnClientClick="return confirm('Are you Sure ?');" ControlStyle-Width="25px" ControlStyle-Height="20px" />
    </ItemTemplate>
    </asp:TemplateField>
    
    </Columns>
    </asp:GridView>
    </asp:Panel>
    
    <div class="clearfix"></div>
    </div>
    </div>
    
    </div>
    </asp:Panel>
    </asp:View>
    
    <asp:View ID="View1" runat="server">
    <asp:Panel ID="pnlAddQualifications" runat="server" class="row" DefaultButton="btnAddQualifications">
    <div class="col-lg-12">
    <center> 
    <asp:Panel ID="Panel1" runat="server">
    </asp:Panel>
    </center>
    </div>
    <div class="col-md-12">
    <div class="panel">
    <div class="panel-content">
    <div class="col-md-12">
    <asp:HiddenField ID="HdnFieldQualificationID" runat="server" />
    <div class="col-md-4">
    <div class="form-group">
    <label class="control-label">
    Institute Name
    </label>
    <asp:TextBox ID="txtBoxInstituteName" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-4">
    <div class="form-group">
    <label class="control-label">
    Affliated Board/University
    </label>
    <asp:TextBox ID="txtBoxInstituteAddress" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Qualification
    </label>
    <asp:TextBox ID="txtBoxQualification" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Grade
    </label>
    <asp:TextBox ID="txtBoxGrade" runat="server" MaxLength="3" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Year of Passing
    </label>
    <asp:TextBox ID="txtBoxYearOfPassing" runat="server" MaxLength="4" onkeypress="return isNumberKey(this)" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Major Subjects
    </label>
    <asp:TextBox ID="txtBoxMajorSubjects" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    </div>
    
    
    <div class="clearfix"></div>
    </div>
    
    <div class="panel-footer clearfix">
    <div class="pull-right">
    <asp:Button ID="btnBackToPersonalInfo" ValidationGroup="0" runat="server" CssClass="btn btn-success"
    Text="Back" OnClick="btnBackToPersonalInfo_Click" />
    <asp:Button ID="btnAddQualifications" ValidationGroup="0" runat="server" CssClass="btn btn-primary"
    Text="Add" OnClick="btnAddQualifications_Click" />
    <asp:Button ID="btnNextQualification" runat="server" CssClass="btn btn-primary"
    Text="Next" Visible="false" OnClick="btnNextQualification_Click" />
    <asp:Button ID="btnUpdateQualifications" runat="server" CssClass="btn btn-primary"
    Text="Update" Visible="false" OnClick="btnUpdateQualifications_Click" />
    </div>
    </div>
    </div>
    </div>
    
    
    
    </asp:Panel>
    
    <asp:Panel ID="pnlSearchQualifications" runat="server" class="row" DefaultButton="btnSearchQualifications">
    <div class="col-md-12">
    <div class="panel fadeIn">
    <div class="panel-header bg-success">
    <h3><i class="fa fa-search"></i>Search Qualifications </h3>
    </div>
    <div class="panel-content">
    <div class="col-md-4 ">
    <div class="input-group">
    <asp:TextBox runat="server" CssClass="form-control" ID="txtSearchQualifications" PlaceHolder="Enter Employee Name"></asp:TextBox>
    <span class="input-group-btn">
    <asp:Button runat="server" ID="btnSearchQualifications" OnClick="btnSearchQualifications_Click"
    CssClass="btn btn-warning" Text="Search" ValidationGroup="S" />
    </span>
    </div>
    
    </div>
    <asp:Panel ID="pnlGrdViewQualifications" runat="server" CssClass="col-lg-12" ScrollBars="Both">
    <asp:GridView runat="server" ID="grdViewQualifications" AllowPaging="true" PageSize="15" OnPageIndexChanging="grdViewQualifications_PageIndexChanging" OnRowCommand="grdViewQualifications_RowCommand"
    HeaderStyle-BackColor="#99CC99" DataKeyNames="pk_Qualification_QualificationID" AutoGenerateColumns="false" CssClass="table table-condensed table-bordered table-striped table-responsive scrollable">
    <Columns>
    <asp:BoundField DataField="pk_Qualification_QualificationID" HeaderText="S.No" />
    <asp:BoundField DataField="PersonalInfoName" HeaderText="Employee Name" />
    <asp:BoundField DataField="QualificationInstituteName" HeaderText="Institute Name" />
    <asp:BoundField DataField="QualificationInstituteAddress" HeaderText="Affliated Board/University" />
    <asp:BoundField DataField="AcademicQualification" HeaderText="Qualification" />
    <asp:BoundField DataField="QualificationGrade" HeaderText="Grade" />
    <asp:BoundField DataField="QualificationPassingYear" HeaderText="Domicile" />
    <asp:BoundField DataField="QualificationMajorSubjects" HeaderText="Gender" />
    
    <asp:ButtonField CommandName="cmdEdit" HeaderText="Edit" ImageUrl="~/assets/global/images/shopping/edit.png" ButtonType="Image" ControlStyle-Width="25px" ControlStyle-Height="25px" />
    <%--<asp:TemplateField HeaderText="Delete">
    <ItemTemplate>
    <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/assets/global/images/shopping/delete.png" CommandName="cmdDelete" CommandArgument='<%# Container.DataItemIndex %>' OnClientClick="return confirm('Are you Sure ?');" ControlStyle-Width="25px" ControlStyle-Height="20px" />
    </ItemTemplate>
    </asp:TemplateField>--%>
    <asp:ButtonField HeaderText="Delete" ImageUrl="~/assets/global/images/shopping/delete.png" CommandName="cmdDelete" ButtonType="Image" ControlStyle-Width="25px" ControlStyle-Height="20px" ItemStyle-Width="25px" />
    
    </Columns>
    </asp:GridView>
    </asp:Panel>
    
    <div class="clearfix"></div>
    </div>
    </div>
    
    </div>
    </asp:Panel>
    </asp:View>
    
    <asp:View ID="View2" runat="server">
    <asp:Panel ID="pnlAddTrainingsCourses" runat="server" class="row" DefaultButton="btnAddTrainingsCourses">
    <div class="col-lg-12">
    <center> 
    <asp:Panel ID="Panel2" runat="server">
    </asp:Panel>
    </center>
    </div>
    <div class="col-md-12">
    <div class="panel">
    <div class="panel-content">
    <div class="col-md-12">
    <asp:HiddenField ID="hdnFieldTrainingsCoursesID" runat="server" />
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Course Title 
    </label>
    <asp:TextBox ID="txtBoxCourseTitle" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-4">
    <div class="form-group">
    <label class="control-label">
    Instittute Name
    </label>
    <asp:TextBox ID="txtBoxTrainingInstituteName" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-4">
    <div class="form-group">
    <label class="control-label">
    Institute Address
    </label>
    <asp:TextBox ID="txtBoxTrainingInstituteAddress" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Country
    </label>
    <asp:DropDownList ID="ddlCountries" runat="server" CssClass="form-control white">
    </asp:DropDownList>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    From 
    </label>
    <asp:TextBox ID="txtBoxFromDate" runat="server" CssClass="form-control"></asp:TextBox>
    <asp:CalendarExtender ID="cldextFromDate" runat="server" Format="dd/MMM/yyyy" TargetControlID="txtBoxFromDate"></asp:CalendarExtender>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    To
    </label>
    <asp:TextBox ID="txtBoxToDate" runat="server" CssClass="form-control"></asp:TextBox>
    <asp:CalendarExtender ID="cldextToDate" runat="server" Format="dd/MMM/yyyy" TargetControlID="txtBoxToDate"></asp:CalendarExtender>
    </div>
    </div>
    </div>
    <div class="clearfix"></div>
    </div>
    
    <div class="panel-footer clearfix">
    <div class="pull-right">
    <asp:Button ID="btnBackToQualifications" ValidationGroup="0" runat="server" CssClass="btn btn-success"
    Text="Back" OnClick="btnBackToQualifications_Click" />
    <asp:Button ID="btnAddTrainingsCourses" ValidationGroup="0" runat="server" CssClass="btn btn-primary"
    Text="Add" OnClick="btnAddTrainingsCourses_Click" />
    <asp:Button ID="btnNextTrainingsCourses" ValidationGroup="0" runat="server" CssClass="btn btn-primary"
    Text="Next" Visible="false" OnClick="btnNextTrainingsCourses_Click" />
    <asp:Button ID="btnUpdateTrainingsCourses" runat="server" CssClass="btn btn-primary"
    Text="Update" Visible="false" OnClick="btnUpdateTrainingsCourses_Click" />
    </div>
    </div>
    </div>
    </div>
    </asp:Panel>
    
    <asp:Panel ID="pnlSearchTrainingsCourses" runat="server" class="row" DefaultButton="btnSearchTrainingsCourses">
    <div class="col-md-12">
    <div class="panel fadeIn">
    <div class="panel-header bg-success">
    <h3><i class="fa fa-search"></i>Search Trainings/Courses </h3>
    </div>
    <div class="panel-content">
    
    
    <div class="col-md-4 ">
    <div class="input-group">
    <asp:TextBox runat="server" CssClass="form-control" ID="txtSearchTrainingsCourses" PlaceHolder="Enter Employee Name"></asp:TextBox>
    <span class="input-group-btn">
    <asp:Button runat="server" ID="btnSearchTrainingsCourses" OnClick="btnSearchTrainingsCourses_Click"
    CssClass="btn btn-warning" Text="Search" ValidationGroup="S" />
    </span>
    </div>
    
    </div>
    <asp:Panel ID="pnlGrdViewTrainingsCourses" runat="server" CssClass="col-lg-12" ScrollBars="Both">
    <asp:GridView runat="server" ID="grdViewTrainingsCourses" AllowPaging="true" PageSize="15" OnPageIndexChanging="grdViewTrainingsCourses_PageIndexChanging" OnRowCommand="grdViewTrainingsCourses_RowCommand"
    HeaderStyle-BackColor="#99CC99" DataKeyNames="pk_TrainingsCourses_ID" AutoGenerateColumns="false" CssClass="table table-condensed table-bordered table-striped table-responsive scrollable">
    <Columns>
    <asp:BoundField DataField="pk_TrainingsCourses_ID" HeaderText="S.No" />
    <asp:BoundField DataField="PersonalInfoName" HeaderText="Employee Name" />
    <asp:BoundField DataField="TrainingsCoursesCourseTitle" HeaderText="Course Title" />
    <asp:BoundField DataField="TrainingsCoursesInstituteName" HeaderText="Institute Name" />
    <asp:BoundField DataField="TrainingsCoursesInstituteAddress" HeaderText="Institute Address" />
    <asp:BoundField DataField="TrainingsCoursesFromDate" HeaderText="From " />
    <asp:BoundField DataField="TrainingsCoursesToDate" HeaderText="To" />
    
    <asp:ButtonField CommandName="cmdEdit" HeaderText="Edit" ImageUrl="~/assets/global/images/shopping/edit.png" ButtonType="Image" ControlStyle-Width="25px" ControlStyle-Height="25px" />
    <asp:ButtonField HeaderText="Delete" ImageUrl="~/assets/global/images/shopping/delete.png" CommandName="cmdDelete" ButtonType="Image" ControlStyle-Width="25px" ControlStyle-Height="20px" ItemStyle-Width="25px" />
    
    </Columns>
    </asp:GridView>
    </asp:Panel>
    
    <div class="clearfix"></div>
    </div>
    </div>
    
    </div>
    </asp:Panel>
    </asp:View>
    
    <asp:View ID="View3" runat="server">
    <asp:Panel ID="pnlAddServiceInfo" runat="server" class="row" DefaultButton="btnAddServiceInfo">
    <div class="col-lg-12">
    <center> 
    <asp:Panel ID="Panel3" runat="server">
    </asp:Panel>
    </center>
    </div>
    <div class="col-md-12">
    <div class="panel">
    <div class="panel-content">
    <fieldset>
    <legend>From</legend>
    <div class="col-md-12">
    <asp:Button ID="btnPickCurrentRecord" OnClick="btnPickCurrentRecord_Click" Text="Pick Current" runat="server" CssClass="btn btn-sm" />
    </div>
    <div class="col-md-12">
    <asp:HiddenField ID="HdnFieldServiceInfoID" runat="server" />
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Designation
    </label>
    <asp:TextBox ID="txtBoxInitialDesignation" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    BPS
    </label>
    <asp:DropDownList ID="ddlBPS" runat="server" CssClass="form-control white">
    <asp:ListItem Value="0" Text="-Select-"></asp:ListItem>
    <asp:ListItem Value="1" Text="01"></asp:ListItem>
    <asp:ListItem Value="2" Text="02"></asp:ListItem>
    <asp:ListItem Value="3" Text="03"></asp:ListItem>
    <asp:ListItem Value="4" Text="04"></asp:ListItem>
    <asp:ListItem Value="5" Text="05"></asp:ListItem>
    <asp:ListItem Value="6" Text="06"></asp:ListItem>
    <asp:ListItem Value="7" Text="07"></asp:ListItem>
    <asp:ListItem Value="8" Text="08"></asp:ListItem>
    <asp:ListItem Value="9" Text="09"></asp:ListItem>
    <asp:ListItem Value="10" Text="10"></asp:ListItem>
    <asp:ListItem Value="11" Text="11"></asp:ListItem>
    
    <asp:ListItem Value="12" Text="12"></asp:ListItem>
    <asp:ListItem Value="13" Text="13"></asp:ListItem>
    <asp:ListItem Value="14" Text="14"></asp:ListItem>
    <asp:ListItem Value="15" Text="15"></asp:ListItem>
    <asp:ListItem Value="16" Text="16"></asp:ListItem>
    <asp:ListItem Value="17" Text="17"></asp:ListItem>
    <asp:ListItem Value="18" Text="18"></asp:ListItem>
    <asp:ListItem Value="19" Text="19"></asp:ListItem>
    <asp:ListItem Value="20" Text="20"></asp:ListItem>
    <asp:ListItem Value="21" Text="21"></asp:ListItem>
    <asp:ListItem Value="22" Text="22"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Districts
    </label>
    <asp:DropDownList ID="ddlInitialDistricts" runat="server" CssClass="form-control white"></asp:DropDownList>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Department
    </label>
    <asp:TextBox ID="txtBoxDepartment" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Office
    </label>
    <asp:TextBox ID="txtBoxOffice" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Cadre
    </label>
    <asp:TextBox ID="txtBoxCadre" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Service Types
    </label>
    <asp:DropDownList ID="ddlServiceTypes" runat="server" CssClass="form-control white">
    <asp:ListItem Value="0" Text="-Select-"></asp:ListItem>
    <asp:ListItem Value="1" Text="Permanent"></asp:ListItem>
    <asp:ListItem Value="2" Text="Fixed Pay"></asp:ListItem>
    <asp:ListItem Value="3" Text="Contract"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Posting Date
    </label>
    <asp:TextBox ID="txtBoxInitialFromDate" runat="server" CssClass="form-control"></asp:TextBox>
    <asp:CalendarExtender ID="calext" runat="server" Format="dd/MMM/yyyy" TargetControlID="txtBoxInitialFromDate"></asp:CalendarExtender>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Job Status
    </label>
    <asp:DropDownList ID="ddlJobStatus" runat="server" CssClass="form-control white">
    <asp:ListItem Value="-1" Text="-Select-"></asp:ListItem>
    <asp:ListItem Value="0" Text="Prior"></asp:ListItem>
    <asp:ListItem Value="1" Text="Current"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </div>
    </div>
    </fieldset>
    
    <fieldset>
    <legend>To</legend>
    <div class="col-md-12">
    <%--<asp:HiddenField ID="HiddenField1" runat="server" />--%>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Designation
    </label>
    <asp:TextBox ID="txtboxDesignationTo" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    BPS
    </label>
    <asp:DropDownList ID="ddlBpsTo" runat="server" CssClass="form-control white">
    <asp:ListItem Value="0" Text="-Select-"></asp:ListItem>
    <asp:ListItem Value="-1" Text="-Select-"></asp:ListItem>
    <asp:ListItem Value="1" Text="01"></asp:ListItem>
    <asp:ListItem Value="2" Text="02"></asp:ListItem>
    <asp:ListItem Value="3" Text="03"></asp:ListItem>
    <asp:ListItem Value="4" Text="04"></asp:ListItem>
    <asp:ListItem Value="5" Text="05"></asp:ListItem>
    <asp:ListItem Value="6" Text="06"></asp:ListItem>
    <asp:ListItem Value="7" Text="07"></asp:ListItem>
    <asp:ListItem Value="8" Text="08"></asp:ListItem>
    <asp:ListItem Value="9" Text="09"></asp:ListItem>
    <asp:ListItem Value="10" Text="10"></asp:ListItem>
    <asp:ListItem Value="11" Text="11"></asp:ListItem>
    
    <asp:ListItem Value="12" Text="12"></asp:ListItem>
    <asp:ListItem Value="13" Text="13"></asp:ListItem>
    <asp:ListItem Value="14" Text="14"></asp:ListItem>
    <asp:ListItem Value="15" Text="15"></asp:ListItem>
    <asp:ListItem Value="16" Text="16"></asp:ListItem>
    <asp:ListItem Value="17" Text="17"></asp:ListItem>
    <asp:ListItem Value="18" Text="18"></asp:ListItem>
    <asp:ListItem Value="19" Text="19"></asp:ListItem>
    <asp:ListItem Value="20" Text="20"></asp:ListItem>
    <asp:ListItem Value="21" Text="21"></asp:ListItem>
    <asp:ListItem Value="22" Text="22"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Districts
    </label>
    <asp:DropDownList ID="ddlDistrictTo" runat="server" CssClass="form-control white"></asp:DropDownList>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Department
    </label>
    <asp:TextBox ID="txtBoxDepartmentTo" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Office
    </label>
    <asp:TextBox ID="txtBoxOfficeTo" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-group">
    <label class="control-label">
    Cadre
    </label>
    <asp:TextBox ID="txtBoxCadreTo" runat="server" CssClass="form-control"></asp:TextBox>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Service Types
    </label>
    <asp:DropDownList ID="ddlServiceTypeTo" runat="server" CssClass="form-control white">
    <asp:ListItem Value="0" Text="-Select-"></asp:ListItem>
    <asp:ListItem Value="1" Text="Permanent"></asp:ListItem>
    <asp:ListItem Value="2" Text="Fixed Pay"></asp:ListItem>
    <asp:ListItem Value="3" Text="Contract"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Posting Date
    </label>
    <asp:TextBox ID="txtBoxDateTo" runat="server" CssClass="form-control"></asp:TextBox>
    <asp:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MMM/yyyy" TargetControlID="txtBoxDateTo"></asp:CalendarExtender>
    </div>
    </div>
    <div class="col-md-2">
    <div class="form-group">
    <label class="control-label">
    Job Status
    </label>
    <asp:DropDownList ID="ddlJobStatusTo" runat="server" CssClass="form-control white">
    <asp:ListItem Value="-1" Text="-Select-"></asp:ListItem>
    <asp:ListItem Value="0" Text="Prior"></asp:ListItem>
    <asp:ListItem Value="1" Text="Current"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </div>
    
    
    
    </div>
    
    </fieldset>
    
    
    <div class="clearfix"></div>
    </div>
    
    <div class="panel-footer clearfix">
    <div class="pull-right">
    <asp:Button ID="btnBackToTrainingsCourses" ValidationGroup="0" runat="server" CssClass="btn btn-success"
    Text="Back" OnClick="btnBackToTrainingsCourses_Click" />
    <asp:Button ID="btnAddServiceInfo" ValidationGroup="0" runat="server" CssClass="btn btn-primary"
    Text="Add" OnClick="btnAddServiceInfo_Click" />
    <asp:Button ID="btnUpdateServiceInfo" runat="server" CssClass="btn btn-primary"
    Text="Update" Visible="false" OnClick="btnUpdateServiceInfo_Click" />
    </div>
    </div>
    </div>
    </div>
    
    
    
    </asp:Panel>
    
    <asp:Panel ID="pnlSearchServiceInfo" runat="server" class="row" DefaultButton="btnSearchServiceInfo">
    <div class="col-md-12">
    <div class="panel fadeIn">
    <div class="panel-header bg-success">
    <h3><i class="fa fa-search"></i>Search Service Info </h3>
    </div>
    <div class="panel-content">
    <div class="col-md-4 ">
    <div class="input-group">
    <asp:TextBox runat="server" CssClass="form-control" ID="txtSearchServiceInfo" PlaceHolder="Enter Employee Name"></asp:TextBox>
    <span class="input-group-btn">
    <asp:Button runat="server" ID="btnSearchServiceInfo" OnClick="btnSearchServiceInfo_Click"
    CssClass="btn btn-warning" Text="Search" ValidationGroup="S" />
    </span>
    </div>
    
    </div>
    <asp:Panel ID="pnlgrdViewServiceInfo" runat="server" CssClass="col-lg-12" ScrollBars="Both">
    <asp:GridView runat="server" ID="grdViewServiceInfo" AllowPaging="true" PageSize="15" OnPageIndexChanging="grdViewServiceInfo_PageIndexChanging" OnRowCommand="grdViewServiceInfo_RowCommand"
    HeaderStyle-Font-Size="9px" HeaderStyle-BackColor="#99CC99" DataKeyNames="pk_ServiceInfo_ServiceInfoID" AutoGenerateColumns="false" CssClass="table table-condensed table-bordered table-striped table-responsive scrollable">
    <Columns>
    <asp:BoundField DataField="pk_ServiceInfo_ServiceInfoID" HeaderText="S.No" ItemStyle-Width="40px" />
    <asp:BoundField DataField="PersonalInfoName" HeaderText="Employee" ItemStyle-Width="100px" />
    <asp:BoundField DataField="ServiceInfoInitialDesignation" HeaderText="Designation (From)" ItemStyle-Width="60px" />
    <asp:BoundField DataField="ServiceInfoDepartment" HeaderText="Department (From)" ItemStyle-Width="40px" />
    <asp:BoundField DataField="ServiceInfoOffice" HeaderText="Office (From)" ItemStyle-Width="60px" />
    <asp:BoundField DataField="ServiceInfoFromDate" HeaderText="Posting Date (From) " ItemStyle-Width="100px" />
    <asp:BoundField DataField="ServiceInfoJobStatus" HeaderText="Job Status (From)" ItemStyle-Width="90px" />
    <asp:TemplateField></asp:TemplateField>
    <asp:BoundField DataField="ServiceInfoToDesignation" HeaderText="Designation (To)" ItemStyle-Width="60px" />
    <asp:BoundField DataField="ServiceInfoToDepartment" HeaderText="Department (To)" ItemStyle-Width="40px" />
    <asp:BoundField DataField="ServiceInfoToOffice" HeaderText="Office (To)" ItemStyle-Width="60px" />
    <asp:BoundField DataField="ServiceInfoToDate" HeaderText="Posting Date (To)" ItemStyle-Width="120px" />
    <asp:BoundField DataField="ServiceInfoToJobStatus" HeaderText="Job Status (To)" ItemStyle-Width="100px" />
    <asp:ButtonField CommandName="cmdEdit" HeaderText="Edit" ImageUrl="~/assets/global/images/shopping/edit.png" ButtonType="Image" ControlStyle-Width="25px" ControlStyle-Height="25px" ItemStyle-Width="25px" />
    <asp:ButtonField HeaderText="Delete" ImageUrl="~/assets/global/images/shopping/delete.png" CommandName="cmdDelete" ButtonType="Image" ControlStyle-Width="25px" ControlStyle-Height="20px" ItemStyle-Width="25px" />
    </Columns>
    </asp:GridView>
    </asp:Panel>
    
    <div class="clearfix"></div>
    </div>
    </div>
    
    </div>
    </asp:Panel>
    </asp:View>
    </asp:MultiView>
    </div>
    
    </div>
    </ContentTemplate>
    <Triggers>
    <asp:PostBackTrigger ControlID="btnUpdate" />
    <asp:PostBackTrigger ControlID="btnAddServiceInfo" />
    <asp:PostBackTrigger ControlID="btnAddTrainingsCourses" />
    <asp:PostBackTrigger ControlID="btnAddPersonalInformation" />
    <asp:PostBackTrigger ControlID="btnPickCurrentRecord" />
    <asp:PostBackTrigger ControlID="btnUpdateTrainingsCourses"/>
    <%-- <asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick" />--%>
    <asp:PostBackTrigger ControlID="btnEmployeeActivated" />
    </Triggers>
    </asp:UpdatePanel>
    </asp:Content>



    Tuesday, January 12, 2016 10:24 AM
  • User61956409 posted

    Hi StackUnderflow,

    Please refer to the following sample code.

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <script>
                $(function () {
                    $("#TextBox1").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
                })
    
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm != null) {
                    prm.add_endRequest(function (sender, e) {
                        if (sender._postBackSettings.panelsToUpdate != null) {
                            $("#TextBox1").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
                        }
                    });
                };
            </script>
    
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Button ID="btnok" runat="server" Text="OK" />
        </ContentTemplate>
    </asp:UpdatePanel>
    

    Best Regards,

    Fei Han

    Wednesday, January 13, 2016 8:15 AM
  • User-886220824 posted

    Sir I have used this in my code but doesn't, not even before post back and hangs while browsing 

    Thursday, January 14, 2016 7:18 AM