Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Boston Mass
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript on textbox changed question

    Hello

    I was at the javascriptkit.com and was to use one of there Javascript calenders in my web page the "Popup Date Picker" and the "Date Time Picker". I have the calenders working fine and after the date is selected it fills in the correct textbox with the date. The problem is after the user selects the date in the calender popup window I would like it to run another javascript function. But I cannot see in the calender code how to have it call my javascript code. I also tried the OnChange event with the Textbox that the Calenders are filling in with the date but it only fires when I click in the textbox. I call the Calenders JavaScript functions from my JavaScript script function that is tied to an aspropDownList OnChange Event. Is there any way I can have these calenders call a javascript function
    when the date is selected in there window? Or could I try to catch when the
    textbox is filled in with the date and call my function then?

    Thanks
    Mike

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    It is hard to say without seeing the codes. Can you post a link to a test page? And detail a little bit more your aim, please.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Boston Mass
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Code Example

    Kor

    I have posted a good example of what I am trying to do at this link
    http://www.yousendit.com/download/T1...TXZVbSt4dnc9PQ

    I have a Calander created using JavaScript by TengYong Ng.

    I have a TestCalender.aspx
    <asp:TextBox ID="txtEndTime" runat="server" BackColor="GhostWhite" style="text-align:center">
    </asp:TextBox>
    <asp:TextBox ID="TextBox1" runat="server" BackColor="GhostWhite" style="text-align:center">
    </asp:TextBox>

    I added the OnChange event using Attribute.Add command for the txtEndTime textbox in TestCalender.aspx
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    txtEndTime.Attributes.Add("OnChange", "txtEndTime_CalWithNewDate()");
    }
    }

    So if I enter "12/14/2009" in txtEndTime and then click in the TextBox1 box the OnChange calls the JavaScript function

    function txtEndTime_CalWithNewDate()
    {
    //this is how I call the calender when button is clicked
    NewCssCal('txtEndTime','mmddyyyy','arrow');
    }
    Which calls NewCssCal to Display the Calender which is in the file
    datetimepicker_css.js
    What I want to do is to be able to call the other function
    function ProcessDate()
    {
    //Want to call this fucntion after the calander is closed
    var j = document.getElementById("txtEndTime");
    var Date = j.value
    alert("My New Date is:" + Date);
    }
    when a date is select in the Calander.
    I cannot figure out how to do the in the JavaScript.

    Thanks
    Mike

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Pardon me, but that's not an example of what you are using. That's code we have to download and unzip and install, just to see what you are talking about.

    Can't you show this "live" someplace? Would be more likely to get people to look at it.

    Anyway, for what you want to do, you'll need to modify the JavaScript calendar code. Shouldn't be hard, at all. Whatever code is used to close the calendar and/or put the selected date into your <form> field should be easy to identify. So, then, you just call your function from within that code.

    Likely if you pointed us to the "datetimepicker_css.js" code we could show you where to do that.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Boston Mass
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi
    A working example is located at

    http://rainforestnet.com/demo_datetimepicker.htm

    I have attached the fileDateTimePicker_css.txt which holds the javascript code for the calender.

    I call the function NewCssCal which sets the settings for the control
    function NewCssCal(pCtrl,pFormat,pScroller,pShowTime,pTimeMode,pHideSeconds)

    NewCssCal calls function RenderCssCal(bNewCal) to build the calender
    NewCssCal also calls function Calendar(pDate,pCtrl) to create a calender object with a date.

    RenderCssCal calls the function GenCell(pValue,pHighLight,pColor) to Generate each of the cells of the calender table cell with values.

    I think RenderCssCal is where I need to call my javascript function but I cannot understand how it closes. I know it calls itself recursion to rebuild the calendar.

    Inside RenderCssCal it fills a variable with function callback
    var funcCalback="function callback(id, datum) {\n";
    funcCalback+=" var CalId = document.getElementById(id); if (datum== 'undefined') { var d = new Date(); datum = d.getDate() + '/' +(d.getMonth()+1) + '/' + d.getFullYear(); } window.calDatum=datum;CalId.value=datum;\n";
    funcCalback+=" if (Cal.ShowTime) {\n";
    funcCalback+=" CalId.value+=' '+Cal.getShowHour()+':'+Cal.Minutes;\n";
    funcCalback+=" if (Cal.ShowSeconds)\n CalId.value+=':'+Cal.Seconds;\n";
    funcCalback+=" if (TimeMode==12)\n CalId.value+=''+Cal.getShowAMorPM();\n";
    funcCalback+="}\n winCal.style.visibility='hidden';\n}\n";

    This fills the attached textbox with the selected date from the calender and closes the calendar. I tried adding my function to the end of this variable but it only called my function once at the beginning.

    Thanks
    Mike
    Attached Files Attached Files

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Boston Mass
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile I figured How to get it to work

    First because it the calander used recursion I new it had to do with the CallBack script the calander code was creating.

    So I edit the CallBack Script and Added a call to new function I added called
    Cal.OnDateSelected(CalId.value); passing the date selected.

    //end time picker
    var funcCalback="function callback(id, datum) {\n";
    funcCalback+=" var CalId = document.getElementById(id); if (datum== 'undefined') { var d = new Date(); datum = d.getDate() + '/' +(d.getMonth()+1) + '/' + d.getFullYear(); } window.calDatum=datum;CalId.value=datum;\n";
    funcCalback+=" if (Cal.ShowTime) {\n";
    funcCalback+=" CalId.value+=' '+Cal.getShowHour()+':'+Cal.Minutes;\n";
    funcCalback+=" if (Cal.ShowSeconds)\n CalId.value+=':'+Cal.Seconds;\n";
    funcCalback+=" if (TimeMode==12)\n CalId.value+=''+Cal.getShowAMorPM();\n";
    funcCalback+="}\n Cal.OnDateSelected(CalId.value); winCal.style.visibility='hidden';\n}\n";

    This function calls a Javascript function on my webpage with the date.
    function OnDateSelected(strDate)
    {
    CallBack_WithNewDateSelected(strDate);
    }

    Calendar.prototype.OnDateSelected=OnDateSelected;

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Sorry I didn't see your answer to me before today. Yep, you did exactly right. Great.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •