如何在#logincontainer交换后刷新#optionscontainer（HTMX）

场景与问题 #

你的HTML结构如下：

<div id="optionscontainer" hx-get="http://localhost:8000/get_optionsview" hx-trigger="load"
  hx-swap="innerHTML" class="mb-5">
</div>
<div id="logincontainer" ...>
</div>

需求是每次#logincontainer更新时，自动刷新#optionscontainer。你尝试通过监听htmx:afterSwap事件触发刷新，但htmx.trigger("#optionscontainer", "htmx:refresh")无效果。

当前页面表现：

• 首次加载时optionscontainer能正常发起请求，未登录时显示空占位符
• 登录/注销后logincontainer更新正常，但optionscontainer不会重新发起请求
• 手动刷新页面后，optionscontainer能根据登录状态获取正确内容

你不想采用的方案：

• 将optionscontainer设为logincontainer子元素，破坏服务端路由分离
• 使用OOB交换，需要服务端在同一路由返回两个模板内容

问题根源 #

htmx:refresh事件仅用于让HTMX重新解析元素的HTMX属性，不会主动发起请求。而optionscontainer绑定的触发事件是load，需要触发对应事件或直接发起请求才能刷新内容。

可行解决方案 #

方案1：触发元素的load事件 #

修改事件监听代码，将触发事件改为load（与optionscontainer的hx-trigger配置匹配）：

document.body.addEventListener('htmx:afterSwap', function (event) {
  if (event.target.id === 'logincontainer') {
    htmx.trigger("#optionscontainer", "load");
  }
});

触发load事件后，HTMX会自动执行optionscontainer上的hx-get请求。

方案2：直接调用HTMX的ajax方法 #

如果触发load事件有问题，可手动发起请求，无需依赖元素的hx-trigger配置：

document.body.addEventListener('htmx:afterSwap', function (event) {
  if (event.target.id === 'logincontainer') {
    htmx.ajax('GET', 'http://localhost:8000/get_optionsview', {
      target: '#optionscontainer',
      swap: 'innerHTML'
    });
  }
});

方案3：通过HTMX属性简化配置 #

无需额外JS代码，直接在logincontainer上添加事件触发配置：

<div id="logincontainer" ... hx-on::after-swap="htmx.trigger('#optionscontainer', 'load')">
</div>

每次logincontainer完成内容交换后，会自动触发optionscontainer的刷新。

验证要点 #

• 检查get_optionsview路由是否能根据请求头中的Bearer令牌正确返回对应内容
• 在浏览器开发者工具的Network标签中，确认是否有新的get_optionsview请求发起，查看请求状态与返回结果

内容的提问来源于stack exchange，提问作者lhk