Замена значений для нескольких различных элементов при каждом опросе сервера - htmx

Я пытаюсь опрашивать сервер раз в 5 секунд и обновлять 3 различных значения на странице, все в разных местах. Я просмотрел несколько уроков по htmx и oob swaps и думаю, что я близок к решению, но я просто не могу его получить.

Результаты приходят нормально из бэкенда, просто все они попадают в div с id="udp", откуда я запускаю опрос сервера. Я думаю, что именно это вызывает проблему, но я не уверен, нужно ли мне переместить hx-триггер, чтобы id="ujp" и id="uep" обновлялись, или я упустил что-то еще?

result.html:

        <div>
          <div class="card-body" style="margin: 0 auto">
              <div id="udp" hx-get="{% url 'result' %}" hx-trigger="every 5s" hx-swap-oob="true" style="text-align: center;">
                  {% include 'partials/updated_results.html' %}
              </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body" style="margin: 0 auto">
              <div id="uep" hx-swap-oob="true" style="text-align: center;">
                  {% include 'partials/updated_results.html' %}
              </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body" style="margin: 0 auto">
              <div id="ujp" hx-swap-oob="true" style="text-align: center;">
                  {% include 'partials/updated_results.html' %}
              </div>
          </div>
        </div>

updated_prices.html:

<div id="udp"
  hx-target="#udp"
  hx-swap="outerHTML">
    {% if add_result1 %}
    <p>{{ add_result1.result }}</p>
    {% else %}
    <p>Retrieving results...</p>
    {% endif %}
</div>

<div id="uep"
  hx-target="#uep"
  hx-swap="outerHTML">
    {% if add_result2 %}
    <p>{{ add_result2.result }}</p>
    {% else %}
    <p>Retrieving results...</p>
    {% endif %}
</div>

<div id="ujp"
  hx-target="#ujp"
  hx-swap="outerHTML">
    {% if add_result3 %}
    <p>{{ add_result3.result }}</p>
    {% else %}
    <p>Retrieving results...</p>
    {% endif %}
</div>

Вы должны указать атрибут hx-swap-oob="true" в HTML ответа. Более того, поскольку вы используете метод замены outerHTML, вы также должны включить все остальные атрибуты, иначе опрос прекратится после первого цикла. Один из div'ов в ответе (здесь первый) не нуждается в атрибуте hx-swap-oob="true", поскольку он будет обычным сменным содержимым.

<div id="udp"
  hx-target="#udp"
  hx-get="{% url 'result' %}" 
  hx-trigger="every 5s" 
  hx-swap="outerHTML"
  style="text-align: center;">
    {% if add_result1 %}
    <p>{{ add_result1.result }}</p>
    {% else %}
    <p>Retrieving results...</p>
    {% endif %}
</div>

<div id="uep" hx-swap-oob="true">
    {% if add_result2 %}
    <p>{{ add_result2.result }}</p>
    {% else %}
    <p>Retrieving results...</p>
    {% endif %}
</div>

<div id="ujp" hx-swap-oob="true">
    {% if add_result3 %}
    <p>{{ add_result3.result }}</p>
    {% else %}
    <p>Retrieving results...</p>
    {% endif %}
</div>
Вернуться на верх