精选AJAX的全日历动态营业时间

时间:2018-12-31 16:48:26

标签: jquery ajax fullcalendar fullcalendar-3

我需要根据选择选项设置的特定ID设置营业时间。我还使用相同的下拉菜单来更新该特定ID的事件。

AJAX运行正常,但是尽管事件可以正常显示,但我无法动态设置选项。这是我的代码。

$('#select').change(function() {

var events = {
    url: "cal/load.php",
    type: 'POST',
    data: {
        id: $(this).val()
    }
}
var bizHours = "";
$.ajax({
    type: 'POST',
    url: 'test.php',
    data: {id:$(this).val()},
    success: function(data)
    { 
      bizHours = data;
      }
  })

$('#calendar').fullCalendar('option', {
businessHours: bizHours

});

$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
$('#calendar').fullCalendar('refetchEvents');
}).change();

这是test.php的返回结果:

[{"dow":"1","start":"10:00:00","end":"18:00:00"},
 {"dow":"2","start":"10:00:00","end":"18:00:00"},
 {"dow":"3","start":"10:00:00","end":"18:00:00"},
 {"dow":"4","start":"09:00:00","end":"17:00:00"},
 {"dow":"5","start":"09:00:00","end":"17:00:00"}]

如果我这样手动设置:

$('#calendar').fullCalendar('option', {
businessHours: [{"dow":"1","start":"10:00:00","end":"18:00:00"}
.....
});

那很好,我认为未设置变量bizHours。 如何根据选择的内容更新工作时间?

更新:由于AJAX的异步特性,已将功能移至成功函数中,但仍具有相同的效果,营业时间未更新。

这是更新的代码:

$('#learn-ins').change(function() {

var events = {
    url: "cal/load.php",
    type: 'POST',
    data: {
        id: $(this).val()
    }
}
bizHours = "";
$.ajax({
    type: 'POST',
    url: 'test.php',
    data: {id:$(this).val()},
    success: function(data)
    { 
      bizHours = data;
$('#calendar').fullCalendar('option', { businessHours: bizHours });
$('#calendar').fullCalendar('removeEventSource', events); 
$('#calendar').fullCalendar('addEventSource', events); 
$('#calendar').fullCalendar('refetchEvents');
      }
  });
});

test.php返回正确的JSON,我已将其添加到控制台以查看值。

0 个答案:

没有答案