#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    20
    Rep Power
    0

    Unhappy Invoke another function AFTER using Datepicker (not during)


    Simple...

    A form has a text field which will contain a date.
    Rather than allowing the user to type in a date (specific format... don't allow errors, etc.) I am using a "date picker" routine.
    There are many out there, and I have tried may of them.
    So I have set the date field to be "readonly", so the user cannot
    enter a date.

    Then I have a little calendar icon which they can click which will invoke the date picker.
    This works great.... the selected date is inserted into the text field.

    Now my problem.... after the date is selected/chosen, I need to invoke a second routine to obtain more information based upon the selected/chosen date, and insert that info into another "readonly" text box.

    I don't want to modify the "date picker" routine to do this subsequent call, because I use it all over the place for other dates which do NOT have this secondary logic.

    I have researched onchange (for the date text box)... it only works for user-entered events.

    I have researched onclick for the little calendar icon..... and can invoke a function which will invoke the date picker, but if I include invocation of the secondary logic, they happen simultaneously.

    How to have the date picker happen first, and then the secondary logic happen next ?

    Thanks in advance for any suggestions.
  2. #2
  3. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,932
    Rep Power
    4033
    If your date picker does not already support it, modify it to provide some sort of onselect callback. Then assign a function to that callback when you need to do something after a date has been selected.

    If you want more detailed help, you need to tell us specifically what date picker you are using, and how you are using it.
    Recycle your old CD's, don't just trash them



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    You can use the .change() API; it does not require "user entered events" (as you say..., the "onChange()" event does). Here is an example of the "Default DatePicker Example" provided by jQuery; that has been adapted with the .change() API and conditional statements..., to give you the effect your looking for:
    Code:
    <!doctype html>
     
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Datepicker - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
      <style>
       #dpMoreInfo {
        display:none;
       }
      </style>
    
      <script>
    
      $(function() {
        $("#datepicker").datepicker();
      });
    
      $("document").ready(function(){
         $("#datepicker").change(function(){
             if($("#datepicker").val() == "08/27/2013") {
               $("#dpMoreInfo").show();
             }
             else {
               $("#dpMoreInfo").hide();
             }
         });
      });
    
      </script>
    
    </head>
    <body>
     
    <p>Date: <input type="text" id="datepicker" readonly/></p>
    <p id="dpMoreInfo">More Info:  <input type="text" readonly/></p>
     
     
    </body>
    </html>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    20
    Rep Power
    0
    web_loone08

    Thanks a lot... almost there.

    I need to have a little icon beside the text box, which is the object to be clicked on to invoke the date picker.

    With what you have shown, I have to click on the text box to make it happen.

    So... how to invoke the date picker by clicking on a calendar icon, rather than clicking on the text box ?

    In any event... your solution is very good.
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Originally Posted by FCDobbs
    web_loone08

    Thanks a lot... almost there.

    I need to have a little icon beside the text box, which is the object to be clicked on to invoke the date picker.

    With what you have shown, I have to click on the text box to make it happen.

    So... how to invoke the date picker by clicking on a calendar icon, rather than clicking on the text box ?

    In any event... your solution is very good.
    Add an icon to the textbox with CSS/jQuery. Give it..., the "id" attribute of "datepicker"; instead of the actual textbox or... you could leave it the way it is and just add a new "datepicker()" function to the icon element (basically you set an new listener with your jQuery anonymous function and attach the "datepicker()" function to it). I think that should do what your wanting it to do.
    Last edited by web_loone08; August 27th, 2013 at 10:48 PM.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    20
    Rep Power
    0
    Code:
    <!doctype html>
     
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Datepicker - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
      <style>
       #dpMoreInfo {
        display:none;
       }
      </style>
    
      <script>
    
      $(function() {
        $("#fred").datepicker();
      });
    
      $("document").ready(function(){
         $("#dpMoreInfo").hide();
         $("#fred").change(function(){
               $("#dpMoreInfo").show();
           });
    
         $("#calendar").click(function(){
    //  alert ("Hi")  
             $("#fred").datepicker();
          });
    
      });
    
    
    
      </script>
    
    </head>
    <body>
    
    <div style="position:absolute; top:100px; left:300px;"> 
    <p>Date: <input type="text" id="fred" readonly/></div>
    <div style="position:absolute; top:120px; left:470px;"> 
     <img src="calendar.png" id="calendar">
    </p>
    
    <p id="dpMoreInfo">More Info:  <input type="text" readonly/></p>
     
     
    </body>
    </html>
    Well, I am trying (very new to jQuery).

    But I still can't get the click event to trigger the datepicker.
    However, if I place a simple "alert ("hi")" in the event, that works.

    A little more help please (and thanks).
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    20
    Rep Power
    0
    Perfect.... thanks ever so much.

    And I have included the "change" event to now invoke a
    "window.open" which calls an asp module which uses the provided/selected date to obtain info from the database, and then
    insert it into the original invoking form.

    The whole idea is to determine a value from the database based on the selected date, and then put that result into the invoking form.

    I have used the window.open command, with parameters of width=1, height=1. It actually invokes an ASP module which does the data base work, and then does a little javascript to place the results into the invoking form, and the close the window.
    This happens so fast you can hardly see it occur.

    Neato

IMN logo majestic logo threadwatch logo seochat tools logo