htmx:afterSettle 无法使用 hx-trigger

Question

此代码不会触发交换事件，即使我可以在控制台中看到 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()

记录的

我正在尝试在换出表单后重新加载图库（表单在 parent product-gallery 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>

更新 - 有效！遵循 https://htmx.org/examples/update-other-content/ 中的解决方案 3：我在表单更新视图中的回复中添加了 header：

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();
        }
    }
})

Answer 1

据我所知你不能像这样使用“afterSettle”：hx-trigger="htmx:afterSettle".

如果要更新页面的第二部分，则可以使用 OOB（带外）：

The hx-swap-oob attribute allows you to specify that some content in a response should be swapped into the DOM somewhere other than the target, that is "Out of Band". This allows you to piggy back updates to other element updates on a response.

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

更多关于Update other content

Answer 2

如果您在使用 HTTP 重定向时遇到问题，那么这可能会对您有所帮助：

如果您想要通过 htmx 触发的响应来执行 整页重新加载 ，那么您应该 而不是 return http 重定向响应（302，又名 Django 中的 HttpResponseRedirect）。

您需要设置 hx-redirect 响应 header：https://htmx.org/reference/#response_headers

如果您设置 hx-redirect 并将 http 响应代码设置为 302，则 htmx 将在 ajax-level（不是全屏）上进行重定向。

接下来可能会让新用户感到困惑的事情：如果您习惯了旧的 post/redirect/get 模式，那么好消息是：不再需要它了。

如果客户端发送 http-post，并且所有数据都通过验证，您应该 return 一个包含新 HTML 的 http 2xx 响应。过时的redirect/get舞会就没必要了

如果您认为 htmx 文档可以得到改进，那么您可能想要创建一个拉取请求来改进文档。

htmx:afterSettle 无法使用 hx-trigger

htmx:afterSettle not working with hx-trigger

htmx