HTMX не срабатывает при загрузке, если это проверка радиосвязи

Я работаю на 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? Или я делаю что-то неправильно.

Не следует ставить триггер 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" включает значение всех дочерних входов в запрос.

Вернуться на верх