#1
  1. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2003
    Posts
    754
    Rep Power
    123

    jquery and call to php


    I am trying to incorporate a calendar with a call to a php script.
    I use jquery provided code https://jqueryui.com/datepicker/ that works very nicely, but after you pick the date I would like to call a php script with the picked date.
    The jquery site provides:
    PHP Code:
    <!doctype html>
    <
    html lang="en">
    <
    head>
      <
    meta charset="utf-8">
      <
    meta name="viewport" content="width=device-width, initial-scale=1">
      <
    title>jQuery UI Datepicker - Default functionality</title>
      <
    link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <
    link rel="stylesheet" href="/resources/demos/style.css">
      <
    script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() {
        $( "#datepicker" ).datepicker();
      } );
      </script>
    </head>
    <body>
     
    <p>Date: <input type="text" id="datepicker"></p>
     
     
    </body>
    </html> 
    I have the following:
    PHP Code:
    <script>
        $( function() {
            $( 
    "#datepicker" ).datepicker();
            $.
    ajax({
                
    url'onchange.php',
                
    type'post',
                
    data: { "argument""data-here"}
            });
        } )
      
    </script> 
    Looks like my script gets called when the page loads, but I want it to get executed when someone picks a date.
    Any suggestions?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2016
    Posts
    76
    Rep Power
    4
    You need to add an onClose option to the datepicker parameters to define what happens when the data picker gets closed (note: if no date is selected, your code will need to detect that before trying to use the data.)

    Change your existing $( "#datepicker" ).datepicker(); to this -

    Code:
    $( "#datepicker" ).datepicker({
         onClose: function(dateText, inst){
    		 // put your ajax code here 
    		 }
    });
  4. #3
  5. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2003
    Posts
    754
    Rep Power
    123
    Thanks!
    After a little searching I have
    PHP Code:
     data: { "argument": $("#datepicker").val()} 
    and this way I can get the contents of the field passed to the php script.
  6. #4
  7. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2003
    Posts
    754
    Rep Power
    123
    For others that may be searching for something similar:
    PHP Code:
        <script>
        $( function() {
            $( 
    "#datepicker" ).datepicker({
                
    changeMonthtrue,
                
    changeYeartrue,
                
    onClose: function(dateTextinst){
                    $.
    ajax({
                        
    url'onchange.php',
                        
    type'post',
                        
    data: { "argument": $("#datepicker").val()}
                    }); 
                }
            });
        } )
        
    </script> 

    Comments on this post

    • jabba_29 agrees
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2016
    Posts
    76
    Rep Power
    4
    The dateText parameter is the value. You don't need more code to get it.

    Comments on this post

    • epanagio agrees
  10. #6
  11. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2003
    Posts
    754
    Rep Power
    123
    Is there a way to pass an argument through the form element?
    PHP Code:
    <p>Date: <input type="text" id="datepicker"></p
    This way I will be able to identify which element I am working on. I have a table that each row has different data and I need to know which row I am working on.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2016
    Posts
    76
    Rep Power
    4
    You would use a class selector to get the date picker to work will all the date fields - class = 'datepicker'. Each field would have a unique id (id's need to be unique anyway.) The inst (instance) parameter contains the id of the field that triggered the date picker - inst.id

IMN logo majestic logo threadwatch logo seochat tools logo