0

I have been trying to retrieve a json from the PHP file and use it in my javascript where it will be used in a variable. I know that the datepicker UI is working whenever I use static variables but once I implement the getJson, the datepicker UI is not working. Is there a way to see if the ajax url is actually working? How do I console log the json object once I retrieve it in the javascript?

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 //= ["21-03-2016","31-03-2016","31-03-2016","30-03-2016"];
    $.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>
abcdefg
  • 69
  • 9
  • you can check if the call is working with the inspect tool from the browser, go to the network tab and you can check the server response for the call – Sabbin Mar 27 '16 at 13:33
  • I am getting this errors on the firefox error. GET http://localhost:8080/resources/demos/style.css [HTTP/1.1 404 Not Found 3ms] GET http://localhost:8080/resources/demos/style.css [HTTP/1.1 404 Not Found 2ms] no element found checkDates.php:32:3 – abcdefg Mar 27 '16 at 14:06

0 Answers0