jquery - 单击日历时将数据加载到部分 View (ASP.NET MVC)

Question

我使用 fullcalendar 插件

我可以单击日历中的日期并从中获取数据

这是脚本代码:

<script>             //Calendar initialization
$(document).ready(function () {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        events:"/Calendar/GetEvents/",
        firstDay: 1,
        selectable: true,
        select: function (start, end, jsEvent, view) {
            $('#right2').load('@Url.Action("SheduleNewAppointment", "Calendar")');
            var allDay = !start.hasTime() && !end.hasTime();
            $("#startAppointment").val(moment(start).format("MM/DD/YYYY HH:mm a"));

        },
        editable: true
    });
});

通过这段代码我可以获取数据

select: function (start, end, jsEvent, view) {
                $('#right2').load('@Url.Action("SheduleNewAppointment", "Calendar")');
                var allDay = !start.hasTime() && !end.hasTime();
                $("#startAppointment").val(moment(start).format("MM/DD/YYYY HH:mm a"));

            },

我的问题是，我需要在 select 中打开部分 View 并将数据添加到 #startAppointment。输入即可

现在它打开部分 View ，并且不向输入添加数据。 我怎样才能做到这一点？

更新

如果我通过另一个按钮打开部分 View ，然后在部分可见时单击日历，则一切正常

Answer 1

我同意 Lazys 的评论。您需要了解 ajax 操作(例如 .load)异步运行，并且紧邻异步操作调用下面的行上编写的任何代码都将立即执行，而无需等待异步操作操作来完成。

因此，您的代码会尝试访问 startAppointment 元素并在该元素实际存在于页面上之前设置其值。

如果您要运行一些代码，这些代码依赖于 ajax 调用返回的某些数据或标记，那么您必须等待 ajax 调用完成才能运行它。这是保证代码具有正确执行所需的值的唯一方法。这通常是通过回调函数来完成的，您将回调函数提供给进行 ajax 调用的代码，然后将该函数存储起来，并且仅在 ajax 调用成功完成时才执行。

对于 jQuery 的 .load() 方法，您可以提供回调函数作为 load() 方法本身的参数，如下所示:

$('#right2').load(
  '@Url.Action("SheduleNewAppointment", "Calendar")', 
  function () { //this is the callback function. It's not executed at the time you pass it load, but only after the loading operation (done via ajax) has finished
    var allDay = !start.hasTime() && !end.hasTime(); //I've included this line, although it appears to be redundant, since you never use the "allDay" variable afterwards.
    $("#startAppointment").val(moment(start).format("MM/DD/YYYY HH:mm a"));
  }
}); 

参见http://api.jquery.com/load/了解更多信息。

如果您这样做，它保证您的部分页面将在尝试访问该元素的 jQuery 代码之前加载，包括 startAppointment 元素，然后您应该没有问题。