jquery 选择pickadate.js时不会触发HTMX事件

6yjfywim  于 2023-05-28  发布在  jQuery
关注(0)|答案(1)|浏览(196)

我使用django-forms-dynamic包和htmx在MultipleChoiceField上动态加载可用选项。这些选项基于日期字段,我使用Amsul的pickadate.js
我更新了代码。因此,初始查询从数据库中获得正确的选择。但是,如果更改了日期,则不会激发“change”事件。另外,我尝试手动触发htmx事件。没有成功

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>

pickadate脚本

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

                        onOpen: function() {
                            // Get the hidden input field
                            var hiddenInput = $(this.$node).siblings('[name="date_submit"]');
                            // Add HTMX attributes to the hidden input field
                            hiddenInput.attr('hx-trigger', 'change');
                            hiddenInput.attr('hx-get', "{% url 'filter-seats' %}");
                            hiddenInput.attr('hx-target', '#modal-xl');
                        }
    });

    $input.on('change', function() {
        var hiddenInput = $(this).siblings('[name="date_submit"]');
        hiddenInput.val($(this).val());
        htmx.trigger(hiddenInput[0], 'change');
    });
</script>

我错过了什么?

wnavrhmk

wnavrhmk1#

您已将触发器设置为hx-trigger="click change"。首先,这是不正确的,你必须用逗号分隔事件,现在HTMX试图评估change作为触发器修饰符,但没有成功。因此,只有click触发器事件,HTMX在单击input元素时提交表单。同时,pickadate.js还侦听click事件并打开datepicker小部件。选择日期后,表单会发送change事件,但您已经为HTMX禁用了该事件,因此它不会再次提交表单。下次单击输入元素时,HTMX将提交带有先前选择的值的表单。
要解决这个问题,只需删除hx-trigger属性。对于输入字段,默认触发器已经是change事件,因此当pickadate.js在输入字段中输入所选日期时,HTMX将提交表单。

相关问题