HTMX未触发对pickadate.js选择的正确查询

Question

我使用django-forms-dynamic包和htmx在MultipleChoiceField上动态加载可用选项。这些选项是基于日期字段的，对此，我使用Am领事的pickadate.js。

初始查询从数据库中获得正确的选择。但是，如果日期被更改，则查询将落后一步。因此，让我们首先选择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>

我遗漏了什么？

Answer 1

您已经将触发器设置为hx-trigger="click change"。首先，这是不正确的，您必须用逗号分隔事件，现在HTMX试图将change计算为触发器修饰符，但没有成功。因此，只有click触发器事件，HTMX在单击输入元素时提交表单。同时，pickadate.js还侦听click事件并打开datepicker小部件。在选择日期之后，表单会分发change事件，但是您已经为HTMX禁用了该事件，因此它不会再次提交表单。下次单击输入元素时，HTMX将提交带有先前选定值的表单。

要解决这个问题，只需删除hx-trigger属性即可。因此，对于输入字段default trigger is already the change event，当pickadate.js向输入字段输入所选日期时，pickadate.js将提交表单。