更新全日历事件中传递的变量

Question

>我有一个完整的日历，我可以根据选择输入(多个)过滤事件结果：

<select id="ids" name="ids[]" class="form-control" multiple>
<option value="1" selected> Option 1</option>
<option value="2"> Option 2</option>
<option value="3"> Option 3</option>
</select>
<button type="button" id="btn-filter">Apply</button>

默认视图处于选中选项 1 的状态。加载页面时，全日历可以正确检索我的选择。

如果我选择其他选项(例如选项 2)并单击按钮过滤器，则全日历刷新但仍仅传递选项 1(我在调试控制台 Firefox 中看到它)：

火狐控制台：

array_ids[]:    1
start:  2019-06-01T00:00:00
end:    2019-07-01T00:00:00

这是完整日历的代码段

events: {
url: './get-events.php',
cache: false,
type: 'POST',
data: {
array_ids: $("#ids").val()
},
error: function () {
alert('there was an error while fetching events!');
},
},

这是刷新日历的按钮：

$('#btn-filter').on('click', function(e) {
e.preventDefault();
$('#calendar').fullCalendar('refetchEvents');
});

页面加载时，似乎全日历仅存储第一个值：array_ids: $("#ids").val()

编辑：好的，我以这种方式进行了修改：

events: function (start, end, timezone, callback) {
$.ajax({
url: './get-events.php',
data: { "array_ids": $("#ids").val(), "start": moment(start).format(), "end": moment(end).format() },
cache: false,
type: 'POST',
success: function (data) {
$('#calendar').fullCalendar('rerenderEvents');
}
});
},

现在所有选择选项都已通过...但。。。。日历停止呈现结果...仍然空着....但是观看控制台火狐，我看到数据被正确收集....只是不显示在全日历上！

Answer 1

这样做的原因是您将静态数据传递给 fullCalendar。当你写的时候

data: {
array_ids: $("#ids").val()
},

您为 fullCalendar 提供当时- 即创建日历的那一刻的$("#ids").val()值。您只需传递一次该值。fullCalendar 接收并存储该值，并在它联系您的服务器时重复使用它。它不知道值来自哪里，也无法更新它。这就是 JavaScript 的工作方式(实际上是其他大多数编程语言)——变量通常是按值传递的，而不是按引用传递的(无论如何，这里没有引用，因为你只是直接传递函数的输出)。

根据文档(在标题为"动态数据参数">的部分中)，如果您希望 fullCalendar 每次联系服务器时检查新的数据值，则需要为它提供一种方法来执行此操作。你这样做的方式是这样的：

与其为数据传递一个简单的值，不如为 fullCalendar 提供一个回调函数。这意味着 fullCalendar 每次都可以运行该函数，并且它将根据当前数据返回一个新值。

data: function() { // a function that returns an object
return {
array_ids: $("#ids").val()
};
}