How to retrieve Data from Mysql based on DatePicker Selection?
I have a page where I am showing a jquery datepicker with some highlighted dates. How do I retrieve data and populate a div based on a date clicked in the date picker. Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
var dates = [new Date(2011, 9-1, 20), new Date(2011, 9-1, 21),new Date(2011, 10-1, 1)];
$(function(){
$('#datepicker').datepicker({
numberOfMonths: [1,1],
dateFormat: 'dd/mm/yy',
beforeShowDay: highlightDays
});
开发者_StackOverflow社区 function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i].getTime() == date.getTime()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
});
</script>
<style>
#highlight, .highlight {
background-color: #cc0000;
}
</style>
</head>
<body style="font-size:62.5%;">
<div id="datepicker"></div>
<div id="events">
Data From Mysql To Go Here
</div>
</body>
</html>
well, you will need to do an ajax call to a serverside script (php or asp.net or any serverside language/framework of your choosing)
edit after seeing you want the code to happen on selecting a date, i changed the javascript a little end edit
like this:
//add the onSelect function to your date picker, and put the code to fetch your events in there
$('#datepicker').datepicker({
numberOfMonths: [1,1],
dateFormat: 'dd/mm/yy',
beforeShowDay: highlightDays,
onSelect: function(date){
// put your selected date into the data object
var data = {'date': date};
// do the ajax call to the serverside script and pass 'data' to it.
$.get("serverurl/data/getdata.php", data, function(data){
// this function is called upon successfully completing the ajax call
//do your magic here to put the data elements into your div, see below for an example
data.Events.each(function(d){
var e = $('<div/>').text(d.Title);
$('#events').append(e);
});
});
}
});
this would however require you to have your getdata.php return proper json like this:
{
Events: [ {
Title: "event 1",
Description: "event description"
},
{
Title: "event 2",
Description: "event description"
} ]
}
加载中,请稍侯......
精彩评论