下拉触发更改功能以获取日期以在 datetimepicker 中禁用

Question

我有一个员工姓名和 StaffId 的下拉列表。这与预约业务逻辑有关。我正在尝试触发选择更改，以便在连接的 jquery datetimepicker 中设置存储在数据库中的日期将不可用。我已经组装了下面似乎不起作用的代码。谁能指出我正确的方向。谢谢

<script type="text/javascript">
        $(document).ready(function () {
            getdates();
        });

        var unavailableDates;
        $(document).ready( function getdates() {

            $("#StaffId").change(function (e) {
                $this = $(e.target);
                    $.ajax({
                        type: "POST",
                        url: "/Appointment/GetOffdays",
                        data: { StaffId: $this.val()  },
                        //contentType: "application/json"
                        success: function (data) {
                            debugger;
                            unavailableDates = data;

                            $(".jqueryui-marker-datepicker").datepicker({
                                dateFormat: "dd/M/yy",
                                changeMonth: true,
                                changeYear: false,
                                yearRange: "-1:+0",
                                //beforeShowDay: $.datepicker.noWeekends,
                                minDate: new Date(@(ViewBag.year+","+ViewBag.month+","+ViewBag.day)),
                                maxDate: new Date(@(ViewBag.eyear+","+ViewBag.emonth+","+ViewBag.eday)),

                                beforeShowDay: function (date) {
                                    var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                                    debugger;
                                    if ($.inArray(dmy, unavailableDates) == -1) {
                                        return [true, ""];
                                    } else {
                                        return [false, "myclass", "Unavailable"];
                                    }
                                }
                                });
                            },
                             dataType: "json",
                            traditional: true,
                            })


                }

           )
            $('#StaffId').trigger('change');
        });
        </script>

Answer 1

为了降低代码的复杂性，我删除了 getdates 的内容，并用一个简单的 log() 替换它，我将在下面放置它。如果我按原样执行此页面，则首先调用发送到$(document.ready() 的匿名函数，然后再调用函数getdates，导致控制台抛出

jQuery.Deferred exception: getdates is not defined ReferenceError: getdates is not defined

根据这个问题

jQuery - multiple $(document).ready ...?

当多次连续调用 $(document).ready 时，当 DOM 准备好时，每个函数将按照它们设置的顺序被调用。即使您颠倒了对ready 的调用顺序，由于命名函数getDates 仅在函数调用期间命名，因此在其他任何地方都不能使用该名称调用它。编辑：还请注意，如果排队等待 documentready 的第一个函数抛出异常，jquery 将 不 调用下一个。因此，如果匿名函数失败，将完全跳过指定的函数。

请耐心等待，因为我在这个网站上确实没有回答很多问题，而且我可能严重误解了您的代码。但我认为您要做的是定义一个函数getDates，并在名为“#StaffId”的HTML 元素的值发生更改时调用它。要做到这一点，您只需要调用$(document).ready()，它要么调用必须在其范围内定义的函数getdates，要么您可以完全摆脱getdates 并匿名调用其内容。

<script type="text/javascript">
    $(document).ready(function () {
        getdates();
    });

    var unavailableDates;
    //this function might as well be anonymous since getdates is not available anywhere else by that name.
    //The function it refers to is passed and executed on document ready, but the alias getdates goes away.
    $(document).ready( function getdates() {

        console.log("getting dates");
    });
</script>

应该是

<script type="text/javascript">
    //if unavailableDates is not used outside this function, it probably shouldn't be in the global scope.
    var unavailableDates;
    function getDates(){
        //now getDates is available everywhere, by its name
        console.log("getting dates");
    };

    //or $(document).ready(getDates);
    $(getDates);
</script>

或者只是

<script type="text/javascript">
        $(function (){
            //no need for named getdates polluting global namespace if you only intend to call it once.

            //do whatever you want here
    });
</script>

Answer 2

可能是因为您没有首先为下拉列表定义值。试试这个：

$('#StaffId').val('12345');
$('#StaffId').trigger('change');

其他备注：为什么 2 文件准备好了?？