Обновление переданных переменных в событиях fullcalendar - PullRequest
Новая
       22

Обновление переданных переменных в событиях fullcalendar

0 голосов
/ 11 июля 2019

У меня есть полный календарь, где я могу отфильтровать результат событий на основе выбранного входа (несколько): 

<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

Это кусок кода полного календаря 

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 я вижу, что данные собраны правильно .... только не показать в полном календаре!

1 Ответ

1 голос
/ 11 июля 2019

Причина в том, что вы передаете статические данные в 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()
  };
}
...