英文:
Select2 blocks htmx hx-get
问题
我在我的表单选择器上使用了select2和htmx，但出于某种原因，hx-get在表单字段使用select2时没有发送任何请求。
我尝试关闭select2，一切都正常工作，那我该如何解决这个问题？
template.html
英文:
I'm using select2 on my form select with htmx but for some reason hx-get does not send any request while form field has select2
I was trying to turn off select2 and everything works fine, so how can i fix that?
template.html
<form method="get" class="mb-3">
<div class="well">
<div class="row">
<div class="form-group col-sm-4 col-md-4 mb-3">
<div class="custom-select">
{% render_field form.contractor_object|add_class:'form-select' hx-get="/customer/worklog/" hx-target='#id_test' hx-select="#id_test" %}
</div>
</div>
<div class="form-group col-sm-4 col-md-4 mb-3">
<div class="custom-select" id="id_test">
{% render_field form.contractor_section|add_class:'form-select' %}
</div>
</div>
</div>
</div>
<div class="mt-4 custom-label">
<div class="row">
<div class="col">
<button type="submit" class="btn btn-outline-primary">Поиск</button>
<a class="btn btn-outline-primary" href="{% url 'customer_worklog' %}">Сброс</a></div>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$("#id_contractor_object").select2();
});
</script>
<script>
$(document).ready(function () {
$("#id_contractor_counter").select2();
});
</script>
<script>
$(document).ready(function () {
$('#id_contractor_section').select2();
});
</script>
答案1
得分: 0
Select2插件会转换您在标记中最初定义的元素，这就是为什么htmx在该元素上停止工作的原因。一个简单的解决方法是在选择元素的父元素上设置hx属性，并使用from修饰符监听选择元素的事件。在这种情况下，它可以看起来像这样：
<div class="custom-select"
hx-get="/customer/worklog/"
hx-target="#id_test"
hx-trigger="change from:#id_contractor" //或者指向选择器字段的任何选择器。
hx-select="#id_test">
{% render_field form.contractor_object %}
</div>
即使已经实例化了select2，这也应该起作用。
英文:
Select2 plugin transforms the element you originally defined in your markup, that's why htmx stops working on that element. An easy workaround is to set the hx attributes on the select element's parent, and listen for event from the select element using the from modifier. In this case, it can look something like:
<div class="custom-select"
hx-get="/customer/worklog/"
hx-target="#id_test"
hx-trigger="change from:#id_contractor" //or whatever selector points to the selector field.
hx-select="#id_test">
{% render_field form.contractor_object %}
</div>
This should work even with select2 instantiated.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论