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

Question

I've been using this question as a guide to associating events with the jQuery UI Datepicker.

I have my dates and events highlighting for the current month which works fine. My question is how can I refresh the calendar with new events ( a new set of social events on the calendar as stored in SpektrixApp.events) based on a further ajax call (see onChangeMonthYear in code below)

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

Your code does not work by reason of using ajax request in onChangeMonthYear event handler. beforeShowDay called before SpektrixApp.events will change in onChangeMonthYear. For solve problem you can change jQuery.post to jQuery.ajax and add option

async : false

to your ajax request declaration in onChangeMonthYear event handler.

Please see this example jsFiddle

Answer 2

What doesn't work as intended in your code ?

The .datepicker("refresh") method should work : here is a simple example with a delayed update

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