问题
在通过AJAX请求添加后，我正在努力让新添加的事件显示出来...我在这个答案中遵循了这些建议：rerendering events in fullCalendar after Ajax database update但它没有按预期工作。没有刷新。
我仍然需要手动刷新页面才能看到我新创建的活动。
我的代码
(function(){
var calendar = {
init: function(){
this.getEvents();
},
/**
*
*/
getEvents: function(){
$.ajax({
url: '<?php echo base_url('teach/schedule/showAllEvents'); ?>',
type: 'post',
async: false,
dataType: 'json',
success: function(events){
calendar.initCalendar(events);
},
});
},
/**
*
*/
initCalendar: function(events){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
editable: true,
events: events,
eventColor: '#7cd97c',
slotDuration: '00:15:00',
slotEventOverlap: false,
eventDurationEditable: false,
eventOverlap: false,
allDaySlot: false,
/**
* add events here
*/
dayClick: function(date, jsEvent, view) {
$('#myModal').modal('show');
$('#myModal').find('.modal-title').text('Schedule a new lesson');
$('#modalContent').html(Mustache.render($('#scheduleNewLessonTemplate').html()));
$.ajax({
url: '<?php echo base_url('teach/students/showAllStudents'); ?>',
type: 'post',
async: false,
dataType: 'json',
success: function(data){
var html = '';
var i;
for(i = 0; i < data.length; i++){
html += '<option value="' + data[i].student_id + '">' +
'<td>' + data[i].first_name + ' ' + data[i].last_name + ' (' + data[i].email + ')</td>' +
'</option>'
}
$('#listOfStudents').html(html);
}
});
$('#starts').val(date.format());
$('#submitForm').on('click', function(){
data = $('#theForm').serialize();
$.ajax({
type: 'ajax',
method: 'post',
url: '<?php echo base_url('teach/schedule/addEvent'); ?>',
data: data,
async: false,
dataType: 'json',
success: function(response){
calendar.getEvents();
$('#calendar').fullCalendar( 'refetchEvents' ); // I still have to refresh the page to see changes!
},
});
});
},
})
}
};
calendar.init();
})();
问题
如何在addEvent ajax调用后更新事件？