Question

I am modifying a jQuery calendar and want to change this code:

function getEventData() {
  var year = new Date().getFullYear();
  var month = new Date().getMonth();
  var day = new Date().getDate();

  return {
     events : [
        {
           "id":1,
           "start": new Date(year, month, day, 12),
           "end": new Date(year, month, day, 13, 30),
           "title":"Lunch with Mike"
        },
        {
           "id":2,
           "start": new Date(year, month, day, 14),
           "end": new Date(year, month, day, 14, 45),
           "title":"Dev Meeting"
        },
        {
           "id":3,
           "start": new Date(year, month, day + 1, 17),
           "end": new Date(year, month, day + 1, 17, 45),
           "title":"Hair cut"
        },
        {
           "id":4,
           "start": new Date(year, month, day - 1, 8),
           "end": new Date(year, month, day - 1, 9, 30),
           "title":"Team breakfast"
        },
        {
           "id":5,
           "start": new Date(year, month, day + 1, 14),
           "end": new Date(year, month, day + 1, 15),
           "title":"Product showcase"
        },
        {
           "id":6,
           "start": new Date(year, month, day, 10),
           "end": new Date(year, month, day, 11),
           "title":"I'm read-only",
           readOnly : true
        },
        {
           "id":7,
           "start": new Date(year, month, day + 2, 17),
           "end": new Date(year, month, day + 3, 9),
           "title":"Multiday"
        }
     ]
  };
}

I want to pull the JSON data from a database in a PHP page. So I it would have to look something like:

   function getEventData() {

  $.getJSON('../ajax/calendar.php?type=get', function(data) {

        return data;
    });

     }

But I am getting an error saying “Uncaught TypeError: Cannot read property ‘options’ of undefined” which relates to the rendering of the data here:

_renderEvents: function(data, $weekDayColumns) {
      var self = this;
      var options = this.options;
      var eventsToRender;

      if (data.options) {
        var updateLayout = false;
        //update options
        $.each(data.options, function(key, value) {
            if (value !== options[key]) {
              options[key] = value;
              updateLayout = updateLayout || $.ui.weekCalendar.updateLayoutOptions[key];
            }
        });

The JSON returned:

 [{"id":"1","start":"Wed Jan 25 2012 11:30:00 GMT-0800 (PST)","end":"Wed Jan 25 2012 11:45:00 GMT-0800 (PST)","title":"test"}]

Did a test on the PHP page and the JSON is displaying as it should. Any suggestions?

Answer 1

I assume the data in _renderEvents: function(data, $weekDayColumns) { is the data you retrieve with your getEventData() method and store it there then. This being the case, you need to wait until the data actually has content that is returned from the ajax.

The block of code _renderEvents: function(data, $weekDayColumns) { must not be executed before the ajax has finished. You could wrap it in a function and call it onDataDone(), and then in your getJSON callback call that function.

var data = '';

function getEventData() {
    $.getJSON('../ajax/calendar.php?type=get', function(result) {
       data = result;
       onDataDone();
    });
}

function onDataDone() {
    // code that wraps the _renderEvents: function(data, $weekDayColumns) {...
}

getEventData();