如何从 JavaScript 手动触发元素的 hx-get 事件

Posted 2023-05-07

【中文标题】如何从 JavaScript 手动触发元素的 hx-get 事件

【英文标题】：How do I manually trigger a hx-get event of an element from JavaScript

【发布时间】：2021-04-28 19:15:17

【问题描述】：

我正在使用htmx 向我的页面添加一些 AJAX 调用。我有一个cart-count 元素，它被定义为在页面加载后 1 秒内检索购物车中的商品数量：

<span id="cart-count" hx-get="/cart/count"
     hx-trigger="load delay:1s" hx-target="#cart-count" hx-swap="outerhtml">
</span>

我还有一个 add-to-cart 按钮，在它自己的东西之后（例如，使用 htmx 将自己更改为 remove from cart），发送一个额外的属性

    response['HX-Trigger-After-Swap'] = "cart-updated"

到前端（请参阅here 获取文档）。

我有一个可以工作的事件监听器，

document.body.addEventListener("cart-updated",
    function (evt) 
        alert("cart updated")
    )

但是如何在JS中触发#cart-count元素的hx-get呢？

注意

hx-trigger="load delay:1s, cart-updated"

would work 如果购物车的东西在 add-to-cart 元素的父链中，但不幸的是我的网页不是这种情况。

注意这个问题也被问到here

【参考方案1】：

您可以使用from: 修饰符在最新版本的 htmx 中侦听文档正文中的事件，如下所示：

<span hx-get="/cart/count"
      hx-trigger="load delay:1s, cart-updated from:body" 
      hx-swap="outerHTML">
</span>

另请注意，您不需要在此处使用显式目标，因为默认目标是定义 hx-get 的元素。

【参考方案2】：

非常感谢您发布这个问题，也感谢@1cg 的回答！ :)

这个 htmx 库太棒了！

您可以在此处使用 django 检查此服务器响应 hx-trigger 的工作方式： https://github.com/ramiboutas/veryacademy_ecom

基本上，当用户将商品添加到购物篮（或购物车）时，您可以在响应中传递一个事件（在示例中为“updateBasketNumber”），就像在这个视图函数中一样

@require_http_methods(["PUT", "POST"])
def add_to_basket(request, product_id):
    basket = Basket(request)
    product = get_object_or_404(Product, id=product_id)
    basket.add(product=product)
    response = render(request, 'store/basket/_addedbutton.html')
    trigger_client_event(response, "updateBasketNumber",  ,)
    return response

您可以在 html 中添加此触发事件以从服务器获取更多信息（这样您就可以更新购物篮或购物车中的商品数量）：

<div id="basket-number" class="d-inline-flex" 
hx-get="% url 'basket:update-number' %" 
hx-trigger="load delay:0.5s, updateBasketNumber from:body">
% include "store/basket/_number.html" % 
</div>

我在教程中实现了更多的触发事件（最初来自非常学院的 youtube 频道；他使用 ajax &js！），你可以去 github repo 并查看更多。