using datepicker('refresh') on ajax success and inline datepicker's beforeShowDay?

Question

I'm using jquery and jquery ui 1.8.7. I'm creating an inline datepicker when the page loads, then in my ajax success function, I'm calling $('#mydiv').datepicker('refresh'); (I'll post code below).

If the data has been returned from ajax (eg. on the refresh), beforeShowDay calls the highlightDays() function. I know that I'm hitting highlightDays with the correct data twice before everything crashes to a halt and I get an error "TypeError: Cannot read property 0 of undefined".

It seems like the events array is being destroyed after a certain amount of time, but I don't know enough about ajax to really say what's happening. Can anyone point me in the right direction to fix this?

        function highlightDays(date) {
                var day = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                console.log(typeof(events)); // This will return as an object twice before throwing an the above mentioned error
                if($.inArray(day, events) !== -1) {
                    return new Array(true, '');
                } else {
                    return new Array(false, '');
                }   
        }    
        function getEventData() {
                return $.ajax({
                    url: Drupal.settings.basePath + 'correct_path', 
                    data: search+'&path='+window.location.pathname,
                    dataType: 'json',
                    type: 'POST',
                    success: function(data, textStatus, jqXHR) {        
                        // save our returned data
                        events = new Object();
                        events = data;
                        $('#mydiv').datepicker("refresh");
                    }
                });
            }   

        function createDatepicker() {

            // Attach datepicker to the parent div so it returns as 
            // inline.
            $('#mydiv').datepicker({
                dateFormat: 'yy-mm-dd',
                speed: 'immediate',
                altField: '#edit-date-filter-value-datepicker-popup-1',
                beforeShowDay: function(date) {
                      if(typeof (_event_days) === 'undefined') {
                        return new Array(true, '');
                      } else {
                            highlightDays(date);
                        }
                    },
            });
            $('#myinput').hide();
        }   
getEventData();
createDatepicker();

Answer 1

The following code is what ended up working for me. Two big differences. Reworking the highlightDays function and adding all data returned from the ajax call to a global events array, to be used later in highlightDays.

var events = [];
function highlightDays(date) {
        var dayClass = [true, ''];
          var date = $.datepicker.formatDate('yy-mm-dd', new Date(date));                     
                  $.each(events, function(key, value) { 
                    if (date === value[0])  {
                       dayClass = [true, "ui-state-highlight"];
                       return dayClass;

                    } else {
                        return dayClass;
                    }
                 });
              return dayClass;
          }


        function getEventData() {
            return $.ajax({
                url: 'myurl', 
                data: search+'&path='+window.location.pathname,
                dataType: 'json',
                type: 'POST',
                success: function(data, textStatus, jqXHR) {        
                    $.each(data, function (index, value) {
                       events.push([value]);
                    });
                          // popup is the date input field
                          // attaching datepicker to the parent div makes 
                          // it an inline picker    
                          popup.parent().datepicker('refresh');
                }
            });
        }


        function createDatepicker() {

           popup.parent().datepicker({
                dateFormat: 'yy-mm-dd',
                 beforeShowDay: highlightDays

            });
            popup.hide();
        }




        function getSearchString() {
            // Return a search string to pass to the ajax call
            var search = window.location.search;
            if(search !== '') {
                while(search.charAt(0) === '?') {
                    // remove the leading question mark in the search string
                    search = search.substr(1);
                }
            }
            return search;
        }

        // If our popup selector exists, create the datepicker and get event data
        if (popup.length) {     
            var search = getSearchString();
            getEventData();
            createDatepicker();
        }