为什么它无法识别日期选择器上的任何选择？

问题描述 投票：0回答：1

我正在尝试用没有预约的时间填充选择下拉菜单，现在我在使用日期选择器时遇到一些非常愚蠢的事情，因为我希望根据所选日期中所选的医生来填充它，但当我选择这一天时，它似乎甚至没有意识到已经选择了这一天。

这是我的 AJAX 调用

<script>
    $(document).ready(function(){
        $('#datepicker').datepicker({
            onSelect: function() {
                setTimeout(triggerAjaxCall, 0);
            }
        });

        $('#selMedico').change(function(){
            triggerAjaxCall();
        });

        function triggerAjaxCall() {
            var doctor = $('#selMedico').val();
            var date = $('#datepicker').val();

            console.log('Doctor:', doctor);
            console.log('Date:', date); 

            if (!doctor || !date) {
                console.log('Doctor or date not selected');
                return;
            }

            // AJAX call
            $.ajax({
                type: 'POST',
                url: 'fetchConsultas.php',
                data: { medico: doctor, dia: date },
                dataType: 'json',
                success: function(response) {
                    console.log('AJAX request successful');
                    console.log('Response:', response);  

                    $('#hora').empty();
                    $.each(response, function(index, value) {
                        $('#hora').append('<option value="' + value + '">' + value + '</option>');
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('AJAX request failed:', textStatus, errorThrown);  
                }
            });
        }
    });
</script>

这是我的 fetchConsultas.php 文件

<?php
if (isset($_POST['medico']) && isset($_POST['dia'])) {

    $medicoSelecionado = $_POST['medico'];
    $dataSelecionada = $_POST['dia'];

    include 'connection.php';

    $stmt = $pdo->prepare('SELECT id_hora 
                            FROM tabconsultas 
                            WHERE id_medico = ? 
                            AND id_dia = ? ;');
    
    $stmt->execute([$medicoSelecionado, $dataSelecionada]);

    $horarios = $stmt->fetchAll(PDO::FETCH_COLUMN, 0);

    // Create an array of all the hours from 08:00:00 to 18:00:00 (excluding 13:00:00)
    $allHours = [];
    for ($i = 8; $i <= 18; $i++) {
        if ($i != 13) {
            $hour = str_pad($i, 2, '0', STR_PAD_LEFT) . ':00:00';
            $allHours[] = $hour;
        }
    }

    // Get the hours that are not in the result of the query
    $availableHours = array_diff($allHours, $horarios);

    echo json_encode($availableHours);

    $pdo = null;
    $stmt = null;
} else {
    echo "No doctor or date selected.";
}
die();

我很确定日期选择器插件本身有问题，但我经验不足，所以我希望有人可以帮助我找到解决这个问题的方法。

注意：它实际上正确填充下拉列表如果我：

  • 选择一位医生，然后选择一个日期，然后随机选择另一位医生，最后返回到最初选择的医生。

就像这里发生的事情一样：

enter image description here

javascript php json ajax datepicker
1个回答
0
投票

虽然我不确定你的 html 前端代码。我重新生成了一个代码片段只是为了选择医生和日期。我使用了你分享的必需的 JavaScript 代码。您可以检查和比较，以便自己找出问题所在。如果您用更多细节更新您的问题，例如添加前端 html 代码，那么可能会得到更清晰的答案。

无论如何，请检查这里的代码片段：

  $( function() {
    $( "#datepicker" ).datepicker({
      onSelect: function() {
                setTimeout(triggerAjaxCall, 0);
            }
    });
    
  } );
function triggerAjaxCall() {
            var doctor = $('#selMedico').val();
            var date = $('#datepicker').val();
alert("Doctor: " + doctor+"   Date: "+date);
            if (!doctor || !date) {
                alert('Doctor or date not selected');
                return;
            }
  /*
  Here comes the AJAX POST request code 
  */
}
<html>
  <head>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
  </head>
  <body>
    <div id="doctorselection">
      <form id="docselform">
        <label>Select Doctor: </label>
        <select id="selMedico"> 
          <option value="DR. ABC" selected> Dr. ABC</option>
          <option value="DR. XYZ"> Dr. XYZ</option>
        </select>
       <br />
       <label>Select Date: </label>     
        <input type="text" id="datepicker" />    
      </form>
    </div>
  </body>
</html>

上面的代码清楚地完美地选择了医生和日期

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.