CODEWITHSUNDEEP
javascriptphpjqueryjsondatepicker
abcdefg
abcdefg

Reputation: 69

JQuery DatePicker Unavailable Dates via PHP Json

I am trying to retrieve dates from MySQL database which will be used to dynamically disable dates in the datepicker UI. I have retrieved the dates from the database and encoded it in a JSON. This is the output of the echo JSON:

[
 {"dates":"21-03-2016"},
 {"dates":"31-03-2016"},
 {"dates":"31-03-2016"},
 {"dates":"30-03-2016"}
 ]

I have tried to getJSON to the javascript page where it will be retrieved and used to eliminate the dates. However, it is not working as the datepicker UI is not even appearing anymore.

Any suggestions? Thank You.

checkDates.php

<?php
$servername = "localhost";
$username = "user";
$password = "user";
$dbname = "ebooking";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
 } 

$sql = "select booking_date from booking";
$result = $conn->query($sql);

$checkDates = array();

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $checkDate['dates'] = $row['booking_date'];
       
        $checkDates[] = $checkDate;
    }
} else {
    echo "0 results";
}
echo json_encode($checkDates);
 $conn->close();
 ?>

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <link rel="stylesheet"
          href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <script>
        $(function() {
            $( "#datepicker" ).datepicker({
                dateFormat: 'dd-mm-yy',
                beforeShowDay: checkAvailability

            });
        })
        
        $.getJSON('checkDates.php?dld='+ id, function(json){dates=json;});

        function checkAvailability(mydate){
            var myBadDates = dates;

            var $return=true;
            var $returnclass ="available";
            $checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);

            // start loop
            for(var x in myBadDates)
            {
                $myBadDates = new Array( myBadDates[x]['start']);

                for(var i = 0; i < $myBadDates.length; i++)
                    if($myBadDates[i] == $checkdate)
                    {
                        $return = false;
                        $returnclass= "unavailable";
                    }
            }
            //end loop

            return [$return,$returnclass];
        }
    </script>
</head>
<body>
Date:
<input type="text" id="datepicker">
</body>
</html>

Upvotes: 0

Views: 1323

Answers (2)

Greg Borbonus
Greg Borbonus

Reputation: 1384

ok, so I've altered your javascript a bit, and here's the code I've come up with:

$(function() {
  //ajax call better placed here.
  id="my ID"; //Define id, as it's not defined in the original post.
  /* Commented out just for JsFiddle, uncomment this for live version.
  $.getJSON('checkDates.php?dld=' + id, function(json) {
    dates = json;


    $("#datepicker").datepicker({
      dateFormat: 'dd-mm-yy',
      beforeShowDay: checkAvailability

    });
  });
  */
  //For JsFiddle ONLY remove this section of code for live version.
  dates = [{
    "dates": "21-03-2016"
  }, {
    "dates": "31-03-2016"
  }, {
    "dates": "31-03-2016"
  }, {
    "dates": "30-03-2016"
  }];
  $("#datepicker").datepicker({
    dateFormat: 'dd-mm-yy',
    beforeShowDay: checkAvailability

  });
  //End for JsFiddle
});




function checkAvailability(mydate) {


  var myBadDates = dates;

  var $return = true;
  var $returnclass = "available";
  $checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);


  // start loop


  for (var x in myBadDates) {

    if (myBadDates[x].dates == $checkdate) {
      $return = false;
      $returnclass = "unavailable";
    }



  } //end loop



  return [$return, $returnclass];
}

Please see jsFiddle: https://jsfiddle.net/gregborbonus/v1dwqq5r/1/

If the ajax fails, then it will break.

I've edited the code and the updated jsFiddle is here: https://jsfiddle.net/gregborbonus/v1dwqq5r/2/

You're php may be spitting out something different, if this doesn't work for you, link to your php script, and I can test for the correct headers and test the ajax call itself, but I doubt that's even an issue.

Upvotes: 1

Torchify
Torchify

Reputation: 134

checkdates.php

<?php
//Set document mime type... this is important since you want to return json not text!
header('Content-Type: application/json');

$servername = "localhost";
$username = "user";
$password = "user";
$dbname = "ebooking";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
 } 

$sql = "select booking_date from booking";
$result = $conn->query($sql);

$checkDates = array();

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $checkDates[] = $row['booking_date'];
    }
} else {
    echo "0 results";
}
echo json_encode($checkDates);
$conn->close();
?>

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <link rel="stylesheet"
          href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">


</head>
<body>
Date:
<input type="text" id="datepicker">
</body>
<script>
    var badDates;
    $.getJSON('checkDates.php, function(json){badDates=json;});

    $(function() {
        $( "#datepicker" ).datepicker({
            dateFormat: 'dd-mm-yy',
            beforeShowDay: function(date) {
                if($.inArray($.datepicker.formatDate('dd-mm-yy', date ), badDates) > -1)
                {
                    return [false,"Unavailable","Booked"];
                }
                else
                {
                    return [true,"Available","Not Booked"];
                }
            }
        });
    })

</script>
</html>

Try this. I added the content type to the php file. I also changed the javascript around a bit.

Edited for flat array in php file, Thanks @Greg_Borbonus

Upvotes: 0

Related Questions