Блог

Этот код не запускает событие подкачки, хотя я вижу, что в консоли срабатывает событие afterSettle.

 <div id="product-gallery" hx-trigger="htmx:afterSettle" hx-get="{% url 'products' %}" hx-swap="outerHTML">
 

Это работает, но, конечно, зацикливается навсегда, с:

 <div id="product-gallery" hx-trigger="load" hx-get="{% url 'products' %}" hx-swap="outerHTML">
 

Я вижу из htmx.logAll (), что htmx:afterSettle даже срабатывает, он просто не запускает вышеуказанный элемент. Также пробовали htmx:afterSwap, который также регистрируется с помощью logAll()

Я пытаюсь перезагрузить галерею после того, как форма была заменена (форма находится внутри этого родительского продукта-div галереи). Чего я надеялся достичь, добавив ограничение from:

 <div id="product-gallery" hx-get="{% url 'products' %}" hx-swap="outerHTML" hx-trigger="afterSettle from:.product-form">
 

Структура является:

 <div id="product-gallery">
<div id="product-form-1"> 
<form>
...
</form>
</div>
...
</div>
 

Обновление — это работает! Последовало решение 3 из https://htmx.org/examples/update-other-content/:
Я добавил заголовок к своему ответу в представлении обновления формы:

 if form.is_valid():
    form.save()
    context = dict()
    context['form'] = form
    response = render(self.request, 'form_product.html', context)
    response['HX-Trigger'] = 'productUpdate'
    return response
 

Затем я слушаю это событие в галерее div:

 <div id="product-gallery" hx-get="{% url 'products' %}" hx-swap="outerHTML" hx-trigger="productUpdate from:body">
 

Один бит js, который я сохраняю, предназначен для закрытия форм, когда они действительны:

 htmx.on("htmx:afterSwap", function(evt) {
    const eventIdTarget = evt['target'].id;
    if (eventIdTarget === 'product-gallery') {
        if ($("[id^=product-form] .alert-warning").length === 0) {
            $.magnificPopup.close();
        }
    }
})
 

Если у вас возникли проблемы с перенаправлениями http, это может вам помочь:

Если вы хотите, чтобы ответ, который был вызван через htmx, выполнял полную перезагрузку страницы, вам не следует возвращать ответ на перенаправление http (302, он же HttpResponseRedirect в Django).

Вам нужно установить заголовок ответа hx-перенаправления: https://htmx.org/reference/#response_headers

Если вы установите hx-перенаправление и установите код ответа http равным 302, то htmx выполнит перенаправление на уровне ajax (не на весь экран).

Следующее, что может смутить новых пользователей: если вы привыкли к старому шаблону публикации/перенаправления/получения, то есть хорошие новости: это больше не нужно.

Если клиент отправляет http-сообщение и все данные подтверждены, вы должны вернуть ответ http 2xx, содержащий новый HTML. Нет необходимости в устаревшем перенаправлении/получении танца.

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

AFAIK вы не можете использовать «afterSettle» вот так: hx-trigger="htmx:afterSettle" .

Если вы хотите обновить вторую часть страницы, то вы можете использовать OOB (out-off-band):

Атрибут hx-swap-oob позволяет указать, что некоторое содержимое в ответе должно быть перенесено в DOM где-то, кроме целевого объекта, то есть «Вне диапазона». Это позволяет вам добавлять обновления к обновлениям других элементов в ответе.

https://htmx.org/attributes/hx-swap-oob/

Подробнее об обновлении другого контента