我有一个页面,我正在显示一个带有一些突出显示日期的jquery日期选择器。如何根据日期选择器中单击的日期检索数据并填充div。到目前为止,这是我的代码:
<!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
});
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>
答案 0 :(得分:1)
好吧,你需要对服务器端脚本(php或asp.net或你选择的任何服务器端语言/框架)进行ajax调用。
看到您希望代码在选择日期时发生编辑,我稍微更改了javascript 结束编辑
像这样://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);
});
});
}
});
然而,这将要求你让你的getdata.php像这样返回正确的json:
{
Events: [ {
Title: "event 1",
Description: "event description"
},
{
Title: "event 2",
Description: "event description"
} ]
}