【发布时间】：2019-10-29 07:53:58
【问题描述】：
我有一个包含酒店房间列表的页面。每个房间都有一个打开可用性日历的链接。我发现如果我点击第一个房间，日历会正确显示。但是列表下方的链接会打开文件而不是日历。如果我从底部开始向上工作，它们都会正确打开。
以非常简化的形式，这是带有列表的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="ROBOTS" content="NONE">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<br><br>
<a href="javascript:;" class="click" data-roomid="1133">1133</a>
<br><br>
<div class="hiddencal" data-roomid="1133" style="height:250px"></div>
<a href="javascript:;" class="click" data-roomid="1134">1134</a>
<br><br>
<div class="hiddencal" data-roomid="1134" style="height:250px"></div>
<a href="javascript:;" class="click" data-roomid="1135">1135</a>
<br><br>
<div class="hiddencal" data-roomid="1135" style="height:250px"></div>
<a href="javascript:;" class="click" data-roomid="1136">1136</a>
<br><br>
<div class="hiddencal" data-roomid="1136" style="height:250px"></div>
<br><br>
<script>
$(document).ready(function() {
$("a.click").on('click', function() {
var roomid = $(this).attr("data-roomid");
$(".hiddencal[data-roomid='" + roomid + "']").load("testcalendar.php?hid=encinas&room_id=" + roomid + "&month=06&year=2019");
});
});
</script>
</body>
</html>
这是上面有日历的文件：
<?php
//Select database
require_once('XXXXXXXXXXXXXXXX');
mysqli_select_db(XXXXXXXXXXXXXXX);
mysqli_set_charset(XXXXXXXXXXXXX);
// Get the hid which is passed from previous page
if (isset($_REQUEST['hid'])) {
$hid=$_REQUEST['hid'];
}
// Get the room_id which is passed from previous page
if (isset($_REQUEST['room_id'])) {
$room_id=$_REQUEST['room_id'];
}
// Get the month and year passed from previous page
if (isset($_REQUEST['month'])) {
$month=$_REQUEST['month'];
}
if (isset($_REQUEST['year'])) {
$year=$_REQUEST['year'];
}
$setdate = $year."-".$month."-01";
$firstmonth = $month - 2;
if($firstmonth==0) {
$firstmonth=12;
$year=$year-1;
}
if($firstmonth==-1) {
$firstmonth=11;
$year=$year-1;
}
$firstdate = $year."-".$firstmonth."-01";
$lastdate=date('Y-m-d', strtotime("$firstdate +300 day"));
?>
<!DOCTYPE HTML>
<html>
<head>
<meta name="ROBOTS" content="NONE">
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.min.css">
</head>
<body>
<h5>Test Calendar - <?php echo $room_id ?></h5>
<div id="calendar"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script>
$(function() {
function avail(date) {
return true;
}
$('#calendar').datepicker({
beforeShowDay: avail,
dateFormat: 'yy-mm-dd',
defaultDate: '<?php echo $setdate ?>',
minDate: '<?php echo $firstdate ?>',
maxDate: '<?php echo $lastdate ?>',
numberOfMonths: 1,
stepMonths: 1,
showOtherMonths: true
});
});
</script>
</body>
</html>
在日历失败的情况下，会显示标题（“测试日历 - 1136”），所以我知道我可以正常访问该文件。因此，大概是脚本末尾的东西，但我就是看不到问题。
【问题讨论】：
-
我想我明白你在做什么，但我不知道这是一个好方法。正如我所看到的，您有一个图标，当用户单击它时，应该会出现一个日历，显示可用于预订的日期。目前，您正在尝试从 PHP 加载新的 HTML。当您直接导航到加载目标时，它是否正确加载？我会考虑对您的 PHP 进行 AJAX 调用，返回 JSON 或等待日期选择器可以在
beforeShowDate中使用的数据数组。或者它可以每次调用 PHP 并检查单个日期。
标签： jquery jquery-ui jquery-ui-datepicker