HTMX не срабатывает правильный запрос при выборе pickadate.js

Я использую пакет django-forms-dynamic и htmx для динамической загрузки доступных опций на MultipleChoiceField. Опции основаны на поле даты, для которого я использую pickadate.js от Amsul.

Первоначальный запрос получает правильные варианты из базы данных. Однако при изменении даты запрос отстает на шаг. Итак, предположим, что первоначально выбрано 1.11.2022. Если дата изменена на 4.11.2022, запрос выполняется для 1.11.2022. Если выбрано 28.11.2022, запрос делается на 1.11.2022 и т.д.

reservation_form.html

<div class="col-lg-6">
  <div class="form-floating">
    {% render_field reservation_form.date class="datepicker form-control mb-3" 
           hx-get="/reservation/filter-seats" 
           hx-include="#id_dinner" 
           hx-trigger="click change" 
           hx-target="#id_seat_reservation" 
    %}
    <label for="id_date">Dinner Date</label>
  </div>


  <div class="form-floating">
    {% render_field reservation_form.amount_guests class+="form-control" placeholder="" %}
    <label for="id_amount_guests">Guests</label>
  </div>

  <div class="visually-hidden">
    {% render_field reservation_form.dinner %}
  </div>

  <div class="form-check">
    {% render_field reservation_form.seat_reservation class+="form-select" %}
    <label for="id_seat_reservation">Select Seats</label>
  </div>
</div>

скрипт пикадата

<script>
    var $input = $('.datepicker').pickadate({
                        format: 'yyyy-mm-dd',
                        formatSubmit: 'yyyy-mm-dd',
                        min: 0,
                        max: 90,
                        disable: {{ blocked_dates }},
                        firstDay: 1,
                    })

    var picker = $input.pickadate('picker')
</script>

Что я упускаю?

Вы установили триггеры как hx-trigger="click change". Во-первых, это неправильно, вы должны разделять события запятой, прямо сейчас HTMX безуспешно пытается оценить change как модификатор триггера. Поэтому у вас есть только триггерное событие click, HTMX отправляет форму, когда вы нажимаете на элемент ввода. В то же время pickadate.js также слушает событие click и открывает виджет datepicker. После выбора даты форма отправляет событие change, но вы отключили это событие для HTMX, поэтому он не будет отправлять форму снова. При следующем щелчке на элементе ввода HTMX отправляет форму с ранее выбранным значением.

Для устранения проблемы просто удалите атрибут hx-trigger. Для полей ввода триггером по умолчанию уже является событие change , поэтому HTMX отправит форму, когда pickadate.js введет выбранную дату в поле ввода.

Вернуться на верх