2012-02-01 54 views
0

由於某種原因,當我通過ajax加載它時,我的事件數據無法正常使用jquery fullcalendar。但是,ajax請求肯定會返回格式正確的JSON數據 - 如果我只是簡單地複製並粘貼返回的數據,並在初始化日曆時將其硬編碼到事件源中,則所有工作都正常!這是我的代碼 - 任何想法可能是什麼?jquery fullcalendar - 事件數據的奇怪問題

$(document).ready(function() { 
    // This is the data returned by the AJAX request - works fine when hard coded 
    var data = 
      [{"title":"Test Event","description":"<p>Tester<\/p>","start":"1329264000","end":"1329264000","className":"sport junior_school"}];   

     var cal = $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      editable: true, 
      eventSources: [ 
       '<?php echo Url::base()?>school-calendar/fetch_events' 
       //data 
      ] 
     }); 
}); 
+0

定義「工作不正常」。另外,向我們展示PHP代碼的_actual_輸出。 – JAAulde 2012-02-01 12:54:24

+0

使用URL作爲事件源時,日曆中未顯示事件。當硬編碼JSON響應時,如上面粘貼代碼中的'data' var所示,該事件確實顯示在日曆上。除了Url使用Url :: base – bsod99 2012-02-01 13:04:19

+0

生成的URL之外,PHP輸出與上述內容相同這是否使用Kohana生成URL(http://docs.kohanaphp.com/helpers/url)?如果是這樣,它不應該是'url :: base()',而不是'Url :: base'中的大寫'U'? – JAAulde 2012-02-01 13:13:19

回答

1

在您從評論討論中鏈接的頁面中,您沒有使用您在帖子中顯示的代碼。在您的實際頁面中,您正在設置一個名爲data的變量,將您調用的返回值設置爲$.getJSON,然後將data作爲事件源傳遞給fullCalendar

var data = $.getJSON('http://staging.jem-digital.com/lathallan/public_html/school-calendar/fetch_events'); 

$('#calendar').fullCalendar({ 
    //blah blah... 
    eventSources: [ 
     data 
    ], 
    //blah blah... 
}); 

與的問題是,$.getJSON返回jQXHR對象,fullCalendar不能採取這樣的對象作爲數據源。

在Firebug的,如果我清空你的#calendar元素,並運行下面,我得到日曆事件:

$('#calendar').fullCalendar({ 
    header: { 
    left: 'prev,next today', 
    center: 'title', 
    right: 'month,agendaWeek,agendaDay' 
    }, 
    editable: true, 
    eventSources: [ 
    'http://staging.jem-digital.com/lathallan/public_html/school-calendar/fetch_events' 
    ], 
    eventRender: function (event, element) { 
    element.qtip({ 
     content: { 
     text: formatEvent(event), 
     title: { 
      text: event.title, 
      button: true 
     } 
     }, 
     show: { 
     event: 'click', // Show it on click... 
     solo: true // ...and hide all other tooltips... 
     }, 
     hide: false, 
     style: { 
     classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded' 
     } 
    }); 
    } 
}); 

或者,如果你真的想運行自己的AJAX調用,那麼您需要將數據傳遞給$.getJSON成功回調中的日曆。這裏有一個變化是這樣的:

$.getJSON('http://staging.jem-digital.com/lathallan/public_html/school-calendar/fetch_events', function (data) { 
    $('#calendar').fullCalendar({ 
     //blah blah... 
     eventSources: [ 
      data 
     ], 
     //blah blah... 
    }); 
}); 

然而,我看到後者的好處不大。

+0

根據對網站來源的更改,以及我現在在負載上縫製日曆的事件,我認爲這是問題所在? – JAAulde 2012-02-01 19:26:33

+0

我實際上沒有完全更新我發佈的鏈接上的JS - 我昨天在本地進行了測試。你對getJSON的使用是正確的 - 在嘗試使用.get之前,我已經嘗試了這一點,並且還嘗試了上面列出的方法(第一個)。奇怪的是,這個問題似乎只在我的機器本地,網站的遠程版本正常工作。一觸即混!謝謝你的幫助JAAulde。 – bsod99 2012-02-02 09:40:24