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