Question

当我选择某些内容时，Javascript似乎没有输入onSelect。我已经在那里设置了一个不显示的警报（脚本中的其他onChange函数正在运行）

当用户单击日期时，应该显示带有动态选项的下拉菜单。

$(function() {
  $("#cal").datepicker({
    format: 'yyyy-mm-dd',
  });
});

var status = 0;
$(document).ready(function() {
  $("#cal").datepicker({
    format: 'yyyy-mm-dd',
    onSelect: function(dateText, inst) {
      var datum = $(this).datepicker("getDate");
      alert("Datum erfolgreich ausgelesen: " + datum);

      if (datum) {
        $.ajax({
          type: 'GET',
          url: 'ajax.php',
          data: 'datum=' + datum,
          success: function(html) {
            $('#uhrzeit').html(html);
          }
        });
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<label for="cal">Wunschtermin Buchen
  <div id="cal" name="cal"></div>
</label>

Answer 1

问题是因为您已经在第一个document.ready处理程序中的#cal元素上定义了datepicker，所以忽略了在第二个document.ready中使用不同设置再次初始化datepicker的尝试。

要解决此问题，请将两个document.ready处理程序合并为一个，并使用 all 实例化一次#cal日期选择器，如下所示：

var status = 0;

$(function() {
  $("#cal").datepicker({
    format: 'yyyy-mm-dd',
    onSelect: function(dateText, inst) {
      var datum = $(this).datepicker("getDate");
      console.log("Datum erfolgreich ausgelesen: " + datum);

      if (datum) {
        $.ajax({
          type: 'GET',
          url: 'ajax.php',
          data: { datum: datum },
          success: function(html) {
            $('#uhrzeit').html(html);
          }
        });
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<label for="cal">Wunschtermin Buchen
  <div id="cal" name="cal"></div>
</label>

还请注意，此处使用data中的一个对象让jQuery为您序列化查询字符串，还使用console.log()而不是alert()进行调试。应该避免后者，因为它会强制数据类型并阻塞UI线程，这很烦人。

Answer 2

只需声明一次即可，这就是它的工作方式：

 <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>

<script type="text/javascript">
var status = 0;
$(document).ready(function(){
    $( "#cal" ).datepicker({
        format: 'yyyy-mm-dd',
        onSelect: function (dateText, inst){
            var datum = $(this).datepicker( "getDate" );
            alert("Datum erfolgreich ausgelesen: "+datum);

            if(datum){
                $.ajax({
                    type:'GET',
                    url:'ajax.php',
                    data: 'datum='+datum,
                    success:function(html){
                        $('#uhrzeit').html(html);
                    }           
                });
            }
        }
    });
});

</script>
<label for = "cal">Wunschtermin Buchen
   <div id="cal" name="cal"></div>
</label>

onSelect在Datepicker窗口小部件上不起作用

2 个答案: