HTMX如果是radio检查不会触发get on load

Question

我正在使用 Django 并使用 htmx 我有 checkbox input、select 标记和无线电输入都按预期在页面加载时工作它向端点发送请求到服务器检索通过部分模板呈现的某些信息。问题只是当检查了适当的输入值时收音机不会触发它。

这里是收音机输入

<input id="option_{{ option.id }}" class="form-check-input" type="radio"
                    name="radio_{{ question.id }}" value="{{ option.id }}" {% if question.required %} required
                    {% endif %} {% if question.disable %} disabled {% endif %} {% if option.id == radio_response %}
                    checked {% endif %} hx-get="{% url 'survey:dynamic_loader' %}" hx-trigger="load, change"
                    hx-target="#radio-result-{{question.id}}"/>

这是 htmx 的正常行为吗？或者我做错了什么。

Answer 1

您不应将 load 触发器放在无线电输入上。如果您有 10 个无线电输入，那么 load 触发器总共会创建 10 个请求，其中 9 个不会具有您期望的值，因为 HTMX 只是在页面加载时提取无线电输入的实际状态。相反，您应该将 HTMX 属性放在父（分组）元素上。例如：

<div hx-get="{% url 'survey:dynamic_loader' %}" 
     hx-trigger="load, change"
     hx-target="#radio-result-{{question.id}}">
     hx-include="this"
  {% for option in options %}
  <input id="option_{{ option.id }}" 
      class="form-check-input" type="radio"
      name="radio_{{ question.id }}" 
      value="{{ option.id }}" 
      {% if question.required %} required{% endif %} 
      {% if question.disable %} disabled {% endif %} 
      {% if option.id == radio_response %}checked {% endif %} />
  {% endfor %}
</div>

这只会在页面加载时创建一个请求（当然当用户单击单选输入时），并且它将具有正确的单选输入值。 hx-include="this" 属性包括请求中所有子输入的值。

HTMX如果是radio检查不会触发get on load

HTMX does not trigger get on load if it's a radio check

django

events

htmx