如何从 Ajax 响应中重新填充 jquery UI datepicker

Question

我一直使用this question 作为将事件与 jQuery UI Datepicker 关联的指南。

我突出显示了当月的日期和事件，效果很好。我的问题是如何根据进一步的 ajax 调用使用新事件（日历上存储在 SpektrixApp.events 中的一组新社交事件）刷新日历（参见下面代码中的 onChangeMonthYear）

SpektrixApp = {};

(function($) {

    $.post(
        // see tip #1 for how we declare global javascript variables
        SpektrixAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_spektrix_get_events and wp_ajax_spektrix_get_events
            action : 'spektrix_get_events',

            // other parameters can be added along with "action"
            monthId : 9
        },
        function( response ) {
            SpektrixApp.events = response;
            //console.log(events[1]);
            $("#spektrix-event-calendar" ).datepicker({

                beforeShowDay: function(date) {

                    var result = [true, '', null];
                    var matching = $.grep(SpektrixApp.events, function(event) {
                        //console.log(new Date(event.Date).valueOf() );
                        dateToHighlight = new Date(event.Date).valueOf();
                        return dateToHighlight === date.valueOf();
                    });

                    if (matching.length) {
                        result = [true, 'highlight', null];
                    }

                    return result;
                },

                onSelect: function(dateText) {

                    $('#spektrix-dialog').empty(); //empty the target div
                    var date,
                        selectedDate = new Date(dateText),
                        i = 0,
                        event = null;
                        daysEvents = [];

                    /* Determine if the user clicked an event: */
                    while (i < events.length && !event) {
                        //console.log(events[i].Date);
                        date = new Date(SpektrixApp.events[i].Date);

                        if (selectedDate.valueOf() === date.valueOf()) {
                            event = SpektrixApp.events[i];
                            daysEvents.push(event);
                        }
                        i++;
                    }
                    if (daysEvents) {
                       for(i = 0; i < daysEvents.length; i++) {
                        /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
                        var day = new Date(event.Date).getDate().toString();
                        $('#spektrix-dialog').append('<div><a href="/whats-on/'+slugify(event.Title)+'">'+event.Title+'</a></div>');

                    }

                    }
                },

                onChangeMonthYear: function(year, month,instance) {
                    jQuery.post(
                        // see tip #1 for how we declare global javascript variables
                        SpektrixAjax.ajaxurl,
                        {
                            // here we declare the parameters to send along with the request
                            // this means the following action hooks will be fired:
                            // wp_ajax_nopriv_spektrix_get_events and wp_ajax_spektrix_get_events
                            action : 'spektrix_get_events',

                            // other parameters can be added along with "action"
                            monthId : month
                        },
                        function( response ) {
                            SpektrixApp.events = response;
                            $("#spektrix-event-calendar" ).datepicker("refresh");

                        }
                    );
                }

            });

            //console.log(events);
        }
    );



})(jQuery);

function slugify(input)
{
    return input.replace(/\s+/g, '-').toLowerCase();
}

Answer 1

由于在 onChangeMonthYear 事件处理程序中使用 ajax 请求，您的代码无法正常工作。在 SpektrixApp.events 之前调用的 beforeShowDay 将在 onChangeMonthYear 中更改。为了解决问题，您可以将 jQuery.post 更改为 jQuery.ajax 并添加选项

async : false

到 onChangeMonthYear 事件处理程序中的 ajax 请求声明。

请看这个例子jsFiddle

Answer 2

在您的代码中什么不符合预期？

.datepicker("refresh") 方法应该可以工作：这是一个延迟更新的简单示例

var highlight = 3;
$('#date').datepicker({
    beforeShowDay: function(date){
        // highlight days matching the "highlight" weekday :
        var res = [true, "", ""];

        if (date.getDay() == highlight) {
            res = [true, "ui-state-hover", "tip"];
        }

        return res;
    },
    onChangeMonthYear: function(){
        // delayed update : change the "highlight" weekday and trigger refresh
        setTimeout(function(){
            highlight += 1;
            highlight = highlight % 7;
            $('#date').datepicker('refresh');
        }, 1000);
    }
});

fiddle