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

    Join Date
    Nov 2003
    Posts
    754
    Rep Power
    124

    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
    102
    Rep Power
    65
    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
    124
    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
    124
    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
    102
    Rep Power
    65
    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
    124
    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
    102
    Rep Power
    65
    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