jQuery ajax не заполняется, выберите при отправке сообщения

Question

Я пытаюсь заполнить выборку на основе данных ajax.

    <input id="datepicker" name="date" width="270" style = "display: block; float: center;"  required>

            <script> 
        $('#datepicker').datepicker({
                    format: 'd/m/yyyy',
            onSelect: function (date) {
                $.ajax({
                    type: "POST",
                    url: '../../Models/appointment/timesquery.php',
                    data: {
                        'date': date,
                    },
                }).done(function (data) {
                    $('select[name=times]').html(data);
                }).fail(function () {
                    alert('An error has occured.')
                });
            }
                });
        </script>

        <select  class="select-css" name = "times">
             <!-- Options will be added here dynamically using jQuery -->
</select>

Тайм-запрос. php

<?php
$date = $_POST['date']; // <====== Here is our date variable, you need to escape this!!!
$mysqli = NEW MySQLi('localhost','root','','cappeli');
$result = $mysqli->query("SELECT t.`hour` FROM `times` t LEFT JOIN ( SELECT `time` FROM `reservations` WHERE `date` = '$date' GROUP BY `time` HAVING COUNT(*) > 2) r on r.time = t.`hour` WHERE r.time IS NULL ");

while($rows = $result->fetch_assoc())
{
    $hd = $rows['hour'];
    echo "<option value = 'hairdressing'>$hd</option>";
}

?>

Выбор не заполняется, он остается нулевым, и я заменил $date=$_POST['$date']; на $date='1/2/2020' только для того, чтобы убедиться, что запрос правильный, и когда я открыл файл php, я получил свой список значений, но почему он не заполняется в select?

Answer 1

Вот рабочий пример внешнего кода, использующего внутренний сценарий на моем сервере, но дело в том, что код JS работает правильно.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<input id="datepicker" name="date" width="270" style="display: block; float: center;" required>

<script>
  $('#datepicker').datepicker({
    format: 'd/m/yyyy',
    onSelect: function(date) {

      $.ajax({
        type: "POST",
        url: 'https://www.blackwicked.com/testajax.php',
        data: {
          'date': date,
        },
      }).done(function(data) {
        $('select[name=times]').html(data);
      }).fail(function() {
        alert('An error has occured.')
      });
    }
  });
</script>

<select class="select-css" name="times">
  <!-- Options will be added here dynamically using jQuery -->
</select>

Answer 2

Рассмотрим следующий пример.

<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>
<input id="datepicker" name="date" width="270" style="display: block; float: center;" required>

<script>
  $('#datepicker').datepicker({
    format: 'd/m/yyyy',
    onSelect: function(dt) {
      $.ajax({
        type: "POST",
        url: '../../Models/appointment/timesquery.php',
        data: {
          'date': dt,
        },
        dataType: "HTML",
        success: function(data) {
          $("select[name='times']").html(data).fadeIn();
        },
        error: function(x, e, t) {
          console.log(dt, e, t);
          alert("There was a connection issue, please review console for more details.");
        }
      });
    }
  });
</script>

<select class="select-css" name="times" style="display: none;">
  <!-- Options will be added here dynamically using jQuery -->
</select>

Невозможно проверить в сниппете.