Как запустить несколько просмотров в Django одной кнопкой с помощью HTML?

Я работаю над проектом на Django, где мне нужно вызывать два разных представления при нажатии одной кнопки с использованием HTMX.

Сценарий: Сначала мне нужно отправить запрос POST для редактирования задачи (представление edit_positions_tasks). После завершения первого запроса мне нужно отправить запрос GET для создания задачи (просмотр create_position_tasks). Второй запрос должен выполняться только после успешной обработки первого запроса. Текущий код:

<button 
    hx-post="{% url 'hrm_tenant:edit_positions_tasks' task.id %}" 
    hx-target="#task_{{ task.uuid }}" 
    hx-swap="outerHTML"
    hx-on::after-request="htmx.ajax('GET', '{% url 'hrm_tenant:create_position_tasks' empty_position.id %}', {target: '#task_table', swap: 'beforeend'})"
>
    Update
</button>

Проблема: Первый POST-запрос работает корректно и обновляет задачу. Однако запрос GET на create_position_tasks, похоже, не запускается и не выполняется должным образом после завершения первого запроса. В чем мне нужна помощь: Верен ли мой подход к объединению двух запросов в HTML? Если нет, то какой рекомендуемый способ гарантировать, что второй запрос сработает только после успешного завершения первого? Есть ли лучшие способы справиться с этим в HTML или JavaScript? Я был бы признателен за любую информацию!

Таким образом, вы можете обработать запуск html-запроса после завершения другого.

В записи вашего редактирования добавьте заголовок:

request.META["HX-Trigger"] = "triggerCreateView"

Чтобы прослушать триггер, добавьте элемент, который выглядит примерно так (требуется hx-trigger)

<div
hx-get= "{% url 'hrm_tenant:create_position_tasks' empty_position.id %}" hx-target='#task_table' hx-swap='beforeend' hx-trigger='triggerCreateView from:body'
>
</div>

Это означает, что 2-й запрос запускается только после возврата 1-го запроса, потому что он прослушивает triggerCreateView

Одним из вариантов является условное добавление тега script, если это частичный ответ:

<button 
    hx-post="{% url 'hrm_tenant:edit_positions_tasks' task.id %}" 
    hx-target="#task_{{ task.uuid }}" 
    hx-swap="outerHTML"
>
    Update
</button>
<script>
    htmx.ajax(
        'GET',
        '{% url 'hrm_tenant:create_position_tasks' empty_position.id %}',
        {target: '#task_table', swap: 'beforeend'}
    )
</script>

Другой вариант - использовать внеполосный элемент в ответе, который может сам запускаться и меняться местами:

<table hx-swap-oob="beforeend:#task_table">
    <div
        hidden
        hx-get="{% url 'hrm_tenant:create_position_tasks' empty_position.id %}"
        hx-trigger="load"
        hx-swap="outerHTML"
    ></div>
</table>
Вернуться на верх