jQuery Datepicker beforeShowDay仅在第一次单击后才起作用

Question

我遇到了问题beforeShowDay.

当我的页面加载时,直到我点击日历中的一天,我突然显示的日期才会突出显示.此外,如果我单击下个月按钮并返回原始月份,则"选定"日期将按预期突出显示.

因此,只有在日历的初始绘制时,日期才会突出显示,因为我已经编程了它们.日历中的任何点击都会自行修复.

我错过了一个init选项吗？请参阅下面的代码示例.我的测试网址在受保护的目录中,用户/测试/测试通过.看看右栏底部的迷你卡.切换到下个月,然后回来查看我的问题.请注意5月份突出显示的日期.此外,请注意,在发生点击之前,"年份"下拉列表也会丢失.

http://www.urbanbands.com/dev/cgi-bin/links/eventmgr.cgi?do=list

代码:

  <script>
$(document).ready(function(){

    // get the current date
    var today = new Date();
    var m = today.getMonth(), d = today.getDate(), y = today.getFullYear();

    // Need list of event dates for THIS month only from database.
    // Declare 'dates' var before adding "beforeShowDay" option to the datepicker,
    // otherwise, highlightDays() does not have the 'dates' array.
    dates = [];
    fetchEventDays(y, m+1);

    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        setDate: today,
        inline: false
    });


    $('#datepicker').datepicker('option', 'onChangeMonthYear', fetchEventDays);
    $('#datepicker').datepicker('option', 'beforeShowDay', highlightDays);
    $('#datepicker').datepicker('option', 'onSelect', getday);


    // ------------------------------------------------------------------
    // getday
    // ------------------------------------------------------------------
    function getday(dateText, inst) { 
        $('#content').load('http://www.mydomain/eventmgr.cgi?do=view_day;date='+dateText+' #eventMgr_content', function() {
    alert('Load was performed. '+dateText);
        });
    }

    // ------------------------------------------------------------------
    // fetchEventDays
    // ------------------------------------------------------------------
    function fetchEventDays(year, month) {
        var paramStr ='?do=get_event_dates&yr=' + year + '&mo=' + month;
        $.get('<%config.db_cgi_url%>/eventmgr-ajax.cgi'+ paramStr, function(data) {
            var recur_dates = data.split(',');
            for(var i = 0; i < recur_dates.length; i++) {
                var date_parts = recur_dates[i].split('-');
                dates.push(new Date(date_parts[0], date_parts[1]-1, date_parts[2]));
            }                       

// This causes dates with events to highlight on initial draw, but
// when clicking to the next month, it switches back to orig month.
//        $('#datepicker').datepicker('option', {}); // Refresh

        });
    }

    // ------------------------------------------------------------------
    // highlightDays
    // ------------------------------------------------------------------
    function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if ((dates[i].getTime() == date.getTime())) {
                return [true, 'highlight'];
            }
        }
        return [true, ''];
    }


});
  </script>

Answer 1

我看不到您的示例，因为系统提示我输入用户名和密码。然而，请参阅下面我认为正在发生的事情。

$.get是发出 AJAX get 请求的简单简写。AJAX 是异步的，这意味着您调用它并且它不会等待响应。所以基本上，可能发生的情况是日历在获取请求完成之前显示。

我想到有两种方法可以解决这个问题。一种是将您的 get 更改为完整的 ajax call 和 set async : true。

http://api.jquery.com/jQuery.ajax/

另一种选择（可能是更好的选择）是使用when. When基本上允许您在执行其他操作之前等待 ajax 请求完成。这允许它仍然是异步的，但确保依赖代码不会过早执行。这样，可以在 ajax 调用和相关代码之间执行其他操作。

http://api.jquery.com/jQuery.when/