i trying retrieve dates mysql database used dynamically disable dates in datepicker ui. have retrieved dates database , encoded in json. output of echo json:
[ {"dates":"21-03-2016"}, {"dates":"31-03-2016"}, {"dates":"31-03-2016"}, {"dates":"30-03-2016"} ] i have tried getjson javascript page retrieved , used eliminate dates. however, not working datepicker ui not 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 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 = 0; < $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>
ok, i've altered javascript bit, , here's code i've come with:
$(function() { //ajax call better placed here. id="my id"; //define id, it's not defined in original post. /* commented out jsfiddle, uncomment live version. $.getjson('checkdates.php?dld=' + id, function(json) { dates = json; $("#datepicker").datepicker({ dateformat: 'dd-mm-yy', beforeshowday: checkavailability }); }); */ //for jsfiddle remove section of code 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 jsfiddle }); function checkavailability(mydate) { var mybaddates = dates; var $return = true; var $returnclass = "available"; $checkdate = $.datepicker.formatdate('dd-mm-yy', mydate); // start loop (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 ajax fails, break.
i've edited code , updated jsfiddle here: https://jsfiddle.net/gregborbonus/v1dwqq5r/2/
you're php may spitting out different, if doesn't work you, link php script, , can test correct headers , test ajax call itself, doubt that's issue.
Comments
Post a Comment