locked
Textchanged event of a textbox not firing immediately after selecting the date from datetimepicker using javascript RRS feed

  • Question

  • User1357926729 posted

    I have a textbox and when i click on it,the datetimepicker will popup and i can select the date from it.Once the date appears in the textbox,the textchanged event should fire immediately and the consecutive textboxes should get values according to certain calculations on date.But the event is not getting fired immediately.when i jump from 1st textbox to 2nd 1 and when i enter something there and again if i jump,the textchanged event of 1st textbox is working..I'm new to asp.net,so i dont know how to solve this issue..plzz someone help me.I need to fire the textchanged event immeditely when the date is selected the datetimepicker and get displayed in the 1st textbox.

    CalendarControl-niv.js

    function

    positionInfo(object) {

     

    var p_elm = object;

     

    this.getElementLeft = getElementLeft;

     

    function getElementLeft() {

       

    var x = 0;

       

    var elm;

       

    if(typeof(p_elm) == "object"){

          elm = p_elm;

        }

    else {

          elm = document.getElementById(p_elm);

        }

       

    while (elm != null) {

          x+= elm.offsetLeft;

          elm = elm.offsetParent;

        }

       

    return parseInt(x);

      }

     

    this.getElementWidth = getElementWidth;

     

    function getElementWidth(){

       

    var elm;

       

    if(typeof(p_elm) == "object"){

          elm = p_elm;

        }

    else {

          elm = document.getElementById(p_elm);

        }

       

    return parseInt(elm.offsetWidth);

      }

     

    this.getElementRight = getElementRight;

     

    function getElementRight(){

       

    return getElementLeft(p_elm) + getElementWidth(p_elm);

      }

     

    this.getElementTop = getElementTop;

     

    function getElementTop() {

       

    var y = 0;

       

    var elm;

       

    if(typeof(p_elm) == "object"){

          elm = p_elm;

        }

    else {

          elm = document.getElementById(p_elm);

        }

       

    while (elm != null) {

          y+= elm.offsetTop;

          elm = elm.offsetParent;

        }

       

    return parseInt(y);

      }

     

    this.getElementHeight = getElementHeight;

     

    function getElementHeight(){

       

    var elm;

       

    if(typeof(p_elm) == "object"){

          elm = p_elm;

        }

    else {

          elm = document.getElementById(p_elm);

        }

       

    return parseInt(elm.offsetHeight);

      }

     

    this.getElementBottom = getElementBottom;

     

    function getElementBottom(){

       

    return getElementTop(p_elm) + getElementHeight(p_elm);

      }

    }

    function

    CalendarControl() {

     

    var calendarId = 'CalendarControl';

     

    var currentYear = 0;

     

    var currentMonth = 0;

     

    var currentDay = 0;

     

    var selectedYear = 0;

     

    var selectedMonth = 0;

     

    var selectedDay = 0;

     

    var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];

     

    var dateField = null;

     

    function getProperty(p_property){

       

    var p_elm = calendarId;

       

    var elm = null;

       

    if(typeof(p_elm) == "object"){

          elm = p_elm;

        }

    else {

          elm = document.getElementById(p_elm);

        }

       

    if (elm != null){

         

    if(elm.style){

            elm = elm.style;

           

    if(elm[p_property]){

             

    return elm[p_property];

            }

    else {

             

    return null;

            }

          }

    else {

           

    return null;

          }

        }

      }

     

    function setElementProperty(p_property, p_value, p_elmId){

       

    var p_elm = p_elmId;

       

    var elm = null;

       

    if(typeof(p_elm) == "object"){

          elm = p_elm;

        }

    else {

          elm = document.getElementById(p_elm);

        }

       

    if((elm != null) && (elm.style != null)){

          elm = elm.style;

          elm[ p_property ] = p_value;

        }

      }

     

    function setProperty(p_property, p_value) {

        setElementProperty(p_property, p_value, calendarId);

      }

     

    function getDaysInMonth(year, month) {

       

    return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];

      }

     

    function getDayOfWeek(year, month, day) {

       

    var date = new Date(year,month-1,day)

       

    return date.getDay();

      }

     

    this.clearDate = clearDate;

     

    function clearDate() {

        dateField.value =

    '';

        hide();

      }

     

    this.setDate = setDate;

     

    function setDate(year, month, day) {

       

    if (dateField) {

         

    if (month < 10) {month = "0" + month;}

         

    if (day < 10) {day = "0" + day;}

         

    var dateString = month+"/"+day+"/"+year;

          dateField.value = dateString;

          hide();

        }

       

    return;

      }

     

    this.changeMonth = changeMonth;

     

    function changeMonth(change) {

        currentMonth += change;

        currentDay = 0;

       

    if(currentMonth > 12) {

          currentMonth = 1;

          currentYear++;

        }

    else if(currentMonth < 1) {

          currentMonth = 12;

          currentYear--;

        }

        calendar = document.getElementById(calendarId);

        calendar.innerHTML = calendarDrawTable();

      }

     

    this.changeYear = changeYear;

     

    function changeYear(change) {

        currentYear += change;

        currentDay = 0;

        calendar = document.getElementById(calendarId);

        calendar.innerHTML = calendarDrawTable();

      }

     

    function getCurrentYear() {

       

    var year = new Date().getYear();

       

    if(year < 1900) year += 1900;

       

    return year;

      }

     

    function getCurrentMonth() {

       

    return new Date().getMonth() + 1;

      }

     

    function getCurrentDay() {

       

    return new Date().getDate();

      }

     

    function calendarDrawTable() {

       

    var dayOfMonth = 1;

       

    var validDay = 0;

       

    var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);

       

    var daysInMonth = getDaysInMonth(currentYear, currentMonth);

       

    var css_class = null; //CSS class for each day

       

    var table = "<table cellspacing='0' cellpadding='0' border='0'>";

        table = table +

    "<tr class='header'>";

        table = table +

    "  <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> </td>";

        table = table +

    "  <td colspan='3' class='title'>" + months[currentMonth-1] + "<br><a   href='javascript:changeCalendarControlYear(-1);'><font color='white' size='3'>&laquo; </font></a>" + currentYear + "<a href='javascript:changeCalendarControlYear(1);'><font color='white' size='3'> &raquo;</font></a></td>";

        table = table +

    "  <td colspan='2' class='next'> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";

        table = table +

    "</tr>";

        table = table +

    "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";

       

    for(var week=0; week < 6; week++) {

          table = table +

    "<tr>";

         

    for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {

           

    if(week == 0 && startDayOfWeek == dayOfWeek) {

              validDay = 1;

            }

    else if (validDay == 1 && dayOfMonth > daysInMonth) {

              validDay = 0;

            }

           

    if(validDay) {

             

    if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {

                css_class =

    'current';

              }

    else if (dayOfWeek == 5 || dayOfWeek == 6) {

                css_class =

    'weekend';

              }

    else {

                css_class =

    'weekday';

              }

              table = table +

    "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";

              dayOfMonth++;

            }

    else {

              table = table +

    "<td class='empty'>&nbsp;</td>";

            }

          }

          table = table +

    "</tr>";

        }

        table = table +

    "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Clear</a> | <a href='javascript:hideCalendarControl();'>Close</a></td></tr>";

        table = table +

    "</table>";

       

    return table;

      }

     

    this.show = show;

     

    function show(field) {

        can_hide = 0;

     

       

    // If the calendar is visible and associated with

       

    // this field do not do anything.

       

    if (dateField == field) {

         

    return;

        }

    else {

          dateField = field;

        }

       

    if(dateField) {

         

    try {

           

    var dateString = new String(dateField.value);

           

    var dateParts = dateString.split("-");

           

            selectedMonth = parseInt(dateParts[0],10);

            selectedDay = parseInt(dateParts[1],10);

            selectedYear = parseInt(dateParts[2],10);

          }

    catch(e) {}

        }

       

    if (!(selectedYear && selectedMonth && selectedDay)) {

          selectedMonth = getCurrentMonth();

          selectedDay = getCurrentDay();

          selectedYear = getCurrentYear();

        }

        currentMonth = selectedMonth;

        currentDay = selectedDay;

        currentYear = selectedYear;

       

    if(document.getElementById){

          calendar = document.getElementById(calendarId);

          calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);

          setProperty(

    'display', 'block');

         

    var fieldPos = new positionInfo(dateField);

         

    var calendarPos = new positionInfo(calendarId);

         

    var x = fieldPos.getElementLeft();

         

    var y = fieldPos.getElementBottom();

          setProperty(

    'left', x + "px");

          setProperty(

    'top', y + "px");

         

    if (document.all) {

            setElementProperty(

    'display', 'block', 'CalendarControlIFrame');

            setElementProperty(

    'left', x + "px", 'CalendarControlIFrame');

            setElementProperty(

    'top', y + "px", 'CalendarControlIFrame');

            setElementProperty(

    'width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');

            setElementProperty(

    'height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');

          }

        }

      }

     

    this.hide = hide;

     

    function hide() {

       

    if(dateField) {

          setProperty(

    'display', 'none');

          setElementProperty(

    'display', 'none', 'CalendarControlIFrame');

          dateField =

    null;

        }

      }

     

    this.visible = visible;

     

    function visible() {

       

    return dateField

      }

     

    this.can_hide = can_hide;

     

    var can_hide = 0;

    }

    var

    calendarControl = new CalendarControl();


    function

    showCalendarControl(textField) {

     

    // textField.onblur = hideCalendarControl;

      calendarControl.show(textField);

    }

    function

    clearCalendarControl() {

      calendarControl.clearDate();

    }

    function

    hideCalendarControl() {

     

    if (calendarControl.visible()) {

        calendarControl.hide();

      }

    }

    function

    setCalendarControlDate(year, month, day) {

      calendarControl.setDate(year, month, day);

    }

    function

    changeCalendarControlYear(change) {

      calendarControl.changeYear(change);

    }

    function

    changeCalendarControlMonth(change) {

      calendarControl.changeMonth(change);

    }

    document.write(

    "<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");

    document.write(

    "<div id='CalendarControl'></div>");

     

    CalendarControl.css

     

    #CalendarControlIFrame

    {

     

    display: none;

     

    left: 0px;

     

    position: absolute;

     

    top: 0px;

     

    height: 250px;

     

    width: 250px;

     

    z-index: 99;

    }

    #CalendarControl

    {

     

    position:absolute;

     

    background-color:#FFF;

     

    margin:0;

     

    padding:0;

     

    display:none;

     

    z-index: 100;

    }

    #CalendarControl

    table {

     

    font-family: arial, verdana, helvetica, sans-serif;

     

    font-size: 8pt;

     

    border-left: 1px solid #336;

     

    border-right: 1px solid #336;

    }

    #CalendarControl

    th {

     

    font-weight: normal;

    }

    #CalendarControl

    th a {

     

    font-weight: normal;

     

    text-decoration: none;

     

    color: #FFF;

     

    padding: 1px;

    }

    #CalendarControl

    td {

     

    text-align: center;

    }

    #CalendarControl

    .header {

     

    background-color: #336;

    }

    #CalendarControl

    .weekday {

     

    background-color: #DDD;

     

    color: #000;

    }

    #CalendarControl

    .weekend {

     

    background-color: #FFC;

     

    color: #000;

    }

    #CalendarControl

    .current {

     

    border: 1px solid #339;

     

    background-color: #336;

     

    color: #FFF;

    }

    #CalendarControl

    .weekday,

    #CalendarControl

    .weekend,

    #CalendarControl

    .current {

     

    display: block;

     

    text-decoration: none;

     

    border: 1px solid #FFF;

     

    width: 2em;

    }

    #CalendarControl

    .weekday:hover,

    #CalendarControl

    .weekend:hover,

    #CalendarControl

    .current:hover {

     

    color: #FFF;

     

    background-color: #336;

     

    border: 1px solid #999;

    }

    #CalendarControl

    .previous {

     

    text-align: left;

    }

    #CalendarControl

    .next {

     

    text-align: right;

    }

    #CalendarControl

    .previous,

    #CalendarControl

    .next {

     

    padding: 1px 3px 1px 3px;

     

    font-size: 1.4em;

    }

    #CalendarControl

    .previous a,

    #CalendarControl

    .next a {

     

    color: #FFF;

     

    text-decoration: none;

     

    font-weight: bold;

    }

    #CalendarControl

    .title {

     

    text-align: center;

     

    font-weight: bold;

     

    color: #FFF;

    }

    #CalendarControl

    .empty {

     

    background-color: #CCC;

     

    border: 1px solid #FFF;

    }

     

     

     Client-Side Code

     

    <%

    @ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>


    <!

    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>

      

    </

    head>

    <

    link href="CalendarControl.css" type="text/css" rel="stylesheet"></link>

    <

    script language="javascript" src="CalendarControl-Niv.js"></script>

    <!-- **** JavaScript Menu HTML Code -->

       

    <style type="text/css">

            

    .ErpTable

            {

             

    width: 100%;

              

    table-layout:fixed;

            }

        

           

    </style>

    <

    body>

       

    <form id="form1" runat="server">

       

    <div>

       

    <asp:TextBox ID="TxtStDate" onfocus="showCalendarControl(this);" runat="server"

                       

    BorderStyle="Solid" BorderWidth="1px" Width="106px"

               

    CssClass="txtBox" AutoPostBack="True"

               

    ontextchanged="TxtStDate_TextChanged" CausesValidation="True"></asp:TextBox>

           

    <br />

           

    <br />

           

    <asp:TextBox ID="TextBox1" runat="server"  Width="106px"

              

    ></asp:TextBox>

           

    <br />

           

    <br />

       

    </div>

       

    </form>

    </

    body>

    </

    html>

    Server Side Code

     

    using

    System;

    using

    System.Collections.Generic;

    using

    System.Linq;

    using

    System.Web;

    using

    System.Web.UI;

    using

    System.Web.UI.WebControls;


    public

    partial class _Default : System.Web.UI.Page

    {

       

    protected void Page_Load(object sender, EventArgs e)

        {

        }

       

    protected void TxtStDate_TextChanged(object sender, EventArgs e)

        {

            Response.Write(

    "abc");

        }

    }

    Please Show me if it is possible to write the event for textchanged in the client side.

    Thanks in Advance..

     

    Sunday, April 7, 2013 4:05 AM

All replies

  • User1508394307 posted

    Read this and this, where it is mentioned that the TextChanged event is raised when the content of the text box changes between posts to the server and by default, the TextChanged event does not immediately cause the Web Forms page to be posted to the server. Instead, the event is raised in server code the next time the form is posted. To have the TextChanged event cause an immediate posting, set the TextBox control's AutoPostBack property to true.

    So, you should add AutoPostBack="True" for the textbox TxtStDate.

    If for any reason that method is still not fired, add __doPostBack

    showCalendarControl(textField) {
    calendarControl.show(textField);
    __doPostBack('<%= Page.ClientID %>', textField.name);
    }

    Sunday, April 7, 2013 4:06 AM
  • User1357926729 posted

    If for any reason that method is still not fired, add __doPostBack

    showCalendarControl(textField) {
    calendarControl.show(textField);
    __doPostBack('<%= Page.ClientID %>', textField.name);
    }

     

    Sorry,Still i am not getting any idea what to do.i have set the autopostback true.after selecting the date using datetimepicker,when i press tab,the textchanged event shud occur.can u show me the code for that..should i use javascript for the textchanged event?

    Sunday, April 7, 2013 8:03 AM
  • User531819608 posted

    put   code   __doPostBack('<%= Page.ClientID %>', dateField.name);

    just before hide() in setDate function in calendarControl-niv.js

    Thursday, June 27, 2019 3:59 PM