Jquery UI Datepicker Календарь не работает, как ожидалось - PullRequest
Новая
       22

Jquery UI Datepicker Календарь не работает, как ожидалось

0 голосов
/ 14 июня 2019

У меня есть страница со списком гостиничных номеров.Против каждой комнаты есть ссылка, чтобы открыть календарь доступности.Я обнаружил, что если я нажму на первую комнату, календарь будет отображаться правильно.Но ссылки внизу списка открывают файл, а не календарь.Если я начну снизу и буду работать вверх, все они откроются правильно.

В очень упрощенной форме это страница со списком: 

<!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>

В тех случаях, когда календарь выходит из строя, отображается заголовок («Test Calendar - 1136»), поэтому я знаю, что добираюсь до этого файла ОК.Предположительно поэтому, это что-то в сценарии в конце, но я просто не вижу проблемы.

Ответы [ 2 ]

0 голосов
/ 17 июня 2019

Проблема заключалась в testcalendar.php, который был файлом, содержащим календарь. Это включало. Хотя я знаю, что идентификатор должен быть уникальным, я не осознавал, что нарушал это правило, когда вставлял файл несколько раз в родительский файл. Тем более, что это было проблемой только при работе вниз по странице, а не при подъеме.

Решением было изменить div на 

<div id="calendar<?php echo $room_id ?>">

и соответствующая строка jquery для 

$('#calendar<?php echo $room_id ?>').datepicker({
0 голосов
/ 16 июня 2019

Вот пример метода, который вы можете рассмотреть. 

$(function() {
  function checkDate(rId, dObj) {
    var dStr = $.datepicker.formatDate("yy-mm-dd", dObj);
    $.get("testcalendar.php", {
      hid: "encinas",
      room_id: rId,
      date: dStr
    }, function(result) {
      if (result) {
        return result;
      } else {
        return true;
      }
    });
    return true;
  }
  $(".room-cal").datepicker({
    dateFormat: 'yy-mm-dd',
    numberOfMonths: 1,
    stepMonths: 1,
    showOtherMonths: true,
    showButtonPanel: true,
    minDate: "+1d",
    maxDate: "+300d",
    beforeShowDay: function(dt) {
      var r = $(this).parent().parent();
      var a = checkDate(r.data("room-id"), dt);
      return [a, (a ? "available" : "booked")];
    }
  });
  $(".room-avail").on("click", function() {
    var cal = $(".room-cal", this);
    cal.datepicker("show");
  });
});
.room {
  margin: 3px;
  padding: .75em;
  border: 2px solid #ccc;
  border-radius: 3px;
}

.room-title {
  font-weight: bold;
  font-size: 18pt;
}

.room-avail {
  background: #cfcfcf;
  float: right;
  display: inline-block;
  border: 1px solid #999;
  border-radius: 3px;
  padding: .4em .2em;
  margin-right: 20px;
  cursor: pointer;
}

.room-cal {
  display: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="room" data-room-id="1133">
  <div class="room-avail" title="Click to see Availiblity"><input type="text" class="room-cal" /><span class="ui-icon ui-icon-calendar"></span> Date Availible</div>
  <div class="room-title">2 Twins - 1133</div>
  <div class="room-desc">Ocean View</div>
</div>
<div class="room" data-room-id="1134">
  <div class="room-avail" title="Click to see Availiblity"><span class="ui-icon ui-icon-calendar"></span> Date Availible</div>
  <div class="room-title">2 Twins - 1134</div>
  <div class="room-desc">First Floor</div>
</div>
<div class="room" data-room-id="1135">
  <div class="room-avail" title="Click to see Availiblity"><span class="ui-icon ui-icon-calendar"></span> Date Availible</div>
  <div class="room-title">2 Twins - 1135</div>
  <div class="room-desc">Ocean View</div>
</div>
<div class="room" data-room-id="1136">
  <div class="room-avail" title="Click to see Availiblity"><span class="ui-icon ui-icon-calendar"></span> Date Availible</div>
  <div class="room-title">2 Twins - 1136</div>
  <div class="room-desc">First Floor</div>
</div>

В PHP у вас может быть что-то вроде: 

<?php
// check-date.php

require_once('XXXXXXXXXXXXXXXX');
mysqli_select_db(XXXXXXXXXXXXXXX);
mysqli_set_charset(XXXXXXXXXXXXX);

if (isset($_GET['hid'])) {
    $hid=$_GET['hid'];
}

if (isset($_GET['room_id'])) {
    $room_id=$_GET['room_id'];
}

if (isset($_GET['date'])) {
    $date=$_GET['month'];
}

$sql = "SELECT avail FROM $hid WHERE room = $room_id AND date = $date LIMIT 1;";
$result = mysqli_query($conn, $sql);
$avail = (mysqli_num_rows($result) ? false : true);

echo $avail;
?>

Это настраивает каждый указатель даты в клиенте и когда beforeShowDay выполняется, каждый день (35 дней) проверяется доступность с помощью команды GET для PHP-скрипта.PHP Script вернет true или false, если комната будет доступна в этот день.DatePicker покажет календарь с завтрашнего дня.Можно выбрать только доступные дни.

Надеюсь, это поможет.

...