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

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

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


javascript jquery fullcalendar callback fullcalendar-3
person Giuseppe Lodi Rizzini    schedule 11.07.2019    source источник
comment
Смотрите мой ответ ниже для исправления вашей исходной версии. Ваша измененная версия не работает, потому что вы не сообщаете fullCalendar о новых событиях. Подумайте об этом - rerenderEvents просто повторно отображает то, что уже есть. Новые данные события находятся в пределах data... но вы их не используете. Согласно документации, вы должны использовать предоставленную функцию обратного вызова, чтобы сообщить fullCalendar о новые события, это не происходит по волшебству. success: function (data) { callback(data); } сработало бы в такой ситуации   -  person ADyson    schedule 11.07.2019
comment
... или, возможно, вам может понадобиться success: function (data) { callback(JSON.parse(data)); }, если jQuery еще не определил, что вывод из PHP - это JSON. Но в любом случае вам не нужна эта сложность, так как вы можете исправить это гораздо проще, используя мой ответ ниже.   -  person ADyson    schedule 11.07.2019

Ответы (1)


arrow_upward
3
arrow_downward

Причина этого в том, что вы передаете статические данные в 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()
  };
}
person ADyson    schedule 11.07.2019
comment
Спасибо, что разъяснили мне проблему @ADyson. Когда вы отвечаете мне, я за несколько секунд до этого отредактировал свой пост с частичным решением с использованием ajax, которое частично работает (но ничего не отображается...), поэтому ваше решение лучше и полностью работает! - person Giuseppe Lodi Rizzini; 11.07.2019
comment
@GiuseppeLodiRizzini без проблем! Да, это лучший способ решить эту проблему. Не забывайте всегда читать документацию полностью — часто в ней уже есть ответ, как в этом случае! Но выше в других комментариях я также добавил небольшое объяснение того, почему ваша вторая попытка не сработала должным образом, просто чтобы вы тоже это поняли. - person ADyson; 11.07.2019
comment
Идеальный! Еще раз спасибо @ADyson - person Giuseppe Lodi Rizzini; 11.07.2019
comment
извините за еще один запрос: я пытаюсь перейти на fullcalendar 4.x, поэтому данные переименовываются в extraParams. Теперь extraParams обрабатывает переменную не как массив... а как строку. Например, если я выберу вариант 1 и 2....extraParams преобразует его в строку: 1,2 вместо массива (1,2). Любое предложение? - person Giuseppe Lodi Rizzini; 11.07.2019
comment
Можете ли вы задать новый вопрос об этом, пожалуйста, с некоторым кодом и правильным примером, красиво отформатированным, чтобы я мог его прочитать и понять. Это отдельный вопрос от того, что обсуждается в этом вопросе. Спасибо. Отметьте меня здесь со ссылкой на ваш новый вопрос, когда он будет готов. - person ADyson; 11.07.2019
comment
Привет, это мой новый пост спасибо stackoverflow.com/questions/56987425/ - person Giuseppe Lodi Rizzini; 11.07.2019