jQuery date picker with PHP example

Question

I'm trying to send some data to the server asynchronously like thus:

(function($){
 $(document).ready(function($){

   var hiddenElement = $("#datepicker");

   $("#date_search").on('click', function(e){
       e.preventDefault();

        if(hiddenElement.is(':visible')){
           hiddenElement.datepicker().slideUp(700);

        } else {
            hiddenElement.datepicker({
                dateFormat: "yy-mm-dd",
                onSelect: function(){
                    var selectedDate = $(this).val();

                    var request = $.ajax({
                        url: "",
                        method: "GET",
                        data: {date: selectedDate},
                        dataType: "html"
                    });

                    request.done(function(msg){

                    });  
                }
            }).slideDown(700);
        }
   })

 });
})(jQuery)


<?php // front-page.php
 $filter_date = isset($_REQUEST['date']) ? $_REQUEST['date'] : current_time('Y-m-d');

 print_r( $filter_date ); 
?>

<style>
 html, body, #page, #content {height: 100%;}
 #datepicker {display:none;}
 #searchby {list-style-type: none;}
 #searchby li {float: left;padding-right: 1em;}
</style>


<ul id="searchby">
 <li><a id="date_search" href="">search by date</a><div id="datepicker"></div></li>
 <li><a href="">search by category</a></li>
 <li><a href="">archive</a></li>
</ul>

Clicking on any date within the datepicker and the PHP script prints '2016-07-29' i.e. todays date to the screen. Not what I'm looking for. It should be printing a users selection of course.

Looking at the console I can see:

But could use a push to get it working.

Edit:

Indeed learning tricks like:

success: function(res){
                 console.log($(res).find("#log").text());
                  }

and

<p id="log"><?php print_r($filter_date); ?></p>

are beneficial.

Hit the + arrow next to get, and see what the PHP script is outputting (Under response). I'm still a bit confused at where the issue lies. Can you clarify "It should be printing a users selection of course."? (What should be printing this? Your .done function currently does nothing ATM.) — Blue
– Blue, Commented Jul 29, 2016 at 13:24
Pressing the plus button reveals the whole DOM is returned. I've tried several return variables within done() with none of them working - hence the omission. — cookie
– cookie, Commented Jul 29, 2016 at 13:28
I believe you should be using success within the actual ajax call. IE: $.ajax({ url: "", method: "GET", data: {date: selectedDate}, dataType: "html", success: function(res) { console.log(res); } }); — Blue
– Blue, Commented Jul 29, 2016 at 13:29
Hang on, I can see the server response within the source. Your tip helped, thanks FrankerZ — cookie
– cookie, Commented Jul 29, 2016 at 13:33

Blue · Accepted Answer · 2016-07-29 13:38:50Z

1

First off, your jQuery should be rewritten as:

var request = $.ajax({
    url: "",
    method: "GET",
    data: {date: selectedDate},
    dataType: "html",
    success: function(res) {
            console.log(res);
            //Do what you want here with the date
        }
});

Also: Because you're calling the script itself, you're going to get all the output (html, and other data). Usually, you only want JSON or a string of exactly what you need. You can do this in one of 2 ways.

Call another script that does nothing but get the date, and return a string. ex. getdate.php, which has only:

 print_r( $filter_date ); 
?>

Or exit the script if date is set in $_REQUEST:

<?php // front-page.php
 if ( isset($_REQUEST['date']) )
 {
      echo $_REQUEST['date'];
      exit;
 }
?>

answered Jul 29, 2016 at 13:38

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery date picker with PHP example

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related