javascript - How can I repopulate the jquery UI datepicker from an Ajax response -
i've been using this question guide associating events jquery ui datepicker.
i have dates , events highlighting current month works fine. question how can refresh calendar new events ( new set of social events on calendar stored in spektrixapp.events) based on further ajax call (see onchangemonthyear in code below)
spektrixapp = {}; (function($) { $.post( // see tip #1 how declare global javascript variables spektrixajax.ajaxurl, { // here declare parameters send along request // means following action hooks fired: // wp_ajax_nopriv_spektrix_get_events , wp_ajax_spektrix_get_events action : 'spektrix_get_events', // other parameters can added along "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 target div var date, selecteddate = new date(datetext), = 0, event = null; daysevents = []; /* determine if user clicked 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; < daysevents.length; i++) { /* if event defined, perform action here; show tooltip, navigate 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 how declare global javascript variables spektrixajax.ajaxurl, { // here declare parameters send along request // means following action hooks fired: // wp_ajax_nopriv_spektrix_get_events , wp_ajax_spektrix_get_events action : 'spektrix_get_events', // other parameters can added along "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(); }
your code not work reason of using ajax request in onchangemonthyear event handler. beforeshowday called before spektrixapp.events change in onchangemonthyear. solve problem can change jquery.post jquery.ajax , add option
async : false
to ajax request declaration in onchangemonthyear event handler.
please see example jsfiddle
Comments
Post a Comment