Обновить переданные переменные в событиях полного календаря
У меня есть полный календарь, в котором я могу фильтровать результаты событий на основе выбранного ввода (несколько):
<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. При загрузке страницы fullcalendar может правильно получить мой выбор.
Если я выберу другой вариант (например, ВАРИАНТ 2) и нажму фильтр кнопки, полное обновление календаря, но все равно пройду только ВАРИАНТ 1 (я вижу его в консоли отладки Firefox):
КОНСОЛЬ ФАЙРЕФОКС:
array_ids[]: 1
start: 2019-06-01T00:00:00
end: 2019-07-01T00:00:00
Это фрагмент кода fullcalendar
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');
});
Кажется, что fullcalendar хранит только первое значение при загрузке страницы: 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');
}
});
},
Теперь все параметры выбора передаются... но.... календарь останавливает рендеринг результата... остается пустым.... но наблюдая за консолью firefox, я вижу, что данные собираются правильно.... только не отображается в полном календаре !
... или, возможно, вам может понадобиться success: function (data) { callback(JSON.parse(data)); }, если jQuery еще не определяет, что вывод PHP - это JSON. Но в любом случае вам не нужна эта сложность, так как вы можете исправить это гораздо проще, используя мой ответ ниже.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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()
};
}
Спасибо, что разъяснили мне проблему @ADyson. Когда вы отвечаете мне, я за несколько секунд до этого отредактировал свой пост с частичным решением с использованием ajax, которое частично работает (но ничего не отображается...), поэтому ваше решение лучше и полностью работает!
@GiuseppeLodiRizzini без проблем! Да, это лучший способ решить эту проблему. Не забывайте всегда читать документацию полностью — часто в ней уже есть ответ, как в этом случае! Но выше в других комментариях я также добавил небольшое объяснение того, почему ваша вторая попытка не сработала должным образом, просто чтобы вы тоже это поняли.
Идеально! Еще раз спасибо @ADyson
извините за еще один запрос: я пытаюсь перейти на fullcalendar 4.x, поэтому данные переименовываются в extraParams. Теперь extraParams обрабатывает переменную не как массив... а как строку. Например, если я выберу вариант 1 и 2....extraParams преобразует его в строку: 1,2 вместо массива (1,2). Любое предложение?
Можете ли вы задать новый вопрос об этом, пожалуйста, с некоторым кодом и правильным примером, красиво отформатированным, чтобы я мог его прочитать и понять. Это отдельный вопрос от того, что обсуждается в этом вопросе. Спасибо. Отметьте меня здесь со ссылкой на ваш новый вопрос, когда он будет готов.
Привет, это мой новый пост, спасибо stackoverflow.com/questions/56987425/…
Смотрите мой ответ ниже для исправления вашей исходной версии. Ваша измененная версия не работает, потому что вы не сообщаете fullCalendar о новых событиях. Подумайте об этом - rerenderEvents просто повторно отображает то, что уже есть. Новые данные о событии находятся внутри
data... но вы их не используете. В соответствии с документация вы должны использовать предоставленную функцию обратного вызова, чтобы сообщить fullCalendar о новых событиях, это не происходит по волшебству.success: function (data) { callback(data); }сработает в этой ситуации