javascript - 如何从 Ajax 响应重新填充 jquery UI 日期选择器

Question

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

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

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