How can I repopulate the jquery UI datepicker from an Ajax response

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();
}

One thing that is really misleading is your use of the term `event` when you say `how can I refresh the calendar with new events based on a further ajax call` are you talking about software events or are you talking about adding a social event to the calendar... `OnClick` would be a software event, `going to the movies` is a social event. — The Muffin Man, Sep 26 '13 at 16:44
Good point. I mean events as in events on a calendar, not a javascript or programmatic event. — codecowboy, Sep 26 '13 at 16:48

score 0 · Accepted Answer · answered Sep 26 '13 at 18:45

0

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

answered Sep 26 '13 at 18:45

Den Kison

1,074
2
13
28

Thanks. Actually my edited code (above) works fine. I don;t really understand how the data gets refreshed in your code when clicking next/prev. Does it just happen with dates = months[month]; line 46 ? – codecowboy Sep 27 '13 at 10:18
When i said that your code does not work i mean that events not changed after click prev / next on the jQuery UI datepicker. – Den Kison Sep 27 '13 at 12:36
_Does it just happen with dates = months[month]; line 46_ - yes, but you must call ajax request in context of onChangeMonthYear with `async : false`. Otherwise, the events will not be updated – Den Kison Sep 27 '13 at 12:38

score 0 · Answer 2 · answered Oct 01 '13 at 10:43

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

How can I repopulate the jquery UI datepicker from an Ajax response

2 Answers2