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

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

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

2 个答案: