Flask中如何用htmx跳转页面并触发目标元素的hx-swap？

你之前尝试跨页面指定hx-target的方式不可行，因为HTMX只能操作当前DOM中的元素，跳转前目标页面的元素还未加载，无法被定位。下面提供两种可靠的实现方式：

方法一：URL参数传递状态（前端触发） #

通过跳转时携带URL参数，在目标页面加载完成后，根据参数触发对应HTMX请求：

1. 在newsletters.html中添加跳转链接/按钮

<!-- 普通链接形式 -->
<a href="/resources?load=b">跳转到Resources并加载B内容</a>

<!-- 按钮形式 -->
<button onclick="window.location.href='/resources?load=b'">跳转到Resources并加载B内容</button>

2. 修改resources.html的逻辑
   移除默认按钮的load触发器，通过JS在页面加载时根据URL参数决定初始加载的内容：

<script>
document.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const targetBtn = urlParams.get('load') === 'b' ? '#load-b-btn' : '#load-a-btn';
  // 触发对应按钮的HTMX请求
  htmx.trigger(targetBtn, 'click');
});
</script>

<button id="load-a-btn"
    hx-get="/data-for-a"
    hx-target="#display-a-or-b" 
    hx-swap="innerHTML">
        Filling this with A
</button>

<button id="load-b-btn"
    hx-get="/data-for-b"
    hx-target="#display-a-or-b" 
    hx-swap="innerHTML">
        Filling this with B
</button>

<tbody id="display-a-or-b">
</tbody>

方法二：后端直接渲染初始内容（Flask端处理） #

在Flask路由中判断URL参数，直接将对应数据渲染到目标元素，页面加载完成后直接显示所需内容，无需额外HTMX请求：

1. 修改Flask的resources路由

from flask import request, render_template

@app.route('/resources')
def resources_page():
    # 获取URL参数，默认加载A
    load_target = request.args.get('load', 'a')
    
    if load_target == 'b':
        # 获取B数据并渲染对应的模板片段
        b_data = your_function_to_get_b_data()  # 替换为你的数据获取逻辑
        initial_content = render_template('data_b_fragment.html', data=b_data)
    else:
        # 默认加载A数据
        a_data = your_function_to_get_a_data()
        initial_content = render_template('data_a_fragment.html', data=a_data)
    
    return render_template('resources.html', initial_content=initial_content)

2. 修改resources.html的tbody部分
   直接填充后端传递的初始内容：

<button id="load-a-btn"
    hx-get="/data-for-a"
    hx-target="#display-a-or-b" 
    hx-trigger="click"
    hx-swap="innerHTML">
        Filling this with A
</button>

<button id="load-b-btn"
    hx-get="/data-for-b"
    hx-target="#display-a-or-b" 
    hx-trigger="click"
    hx-swap="innerHTML">
        Filling this with B
</button>

<tbody id="display-a-or-b">
    {{ initial_content|safe }}
</tbody>

为什么之前的方法无效？ #

HTMX的hx-target只能指向当前页面DOM已存在的元素，当你在newsletters.html点击按钮时，resources.html还未加载到浏览器的DOM中，因此无法定位到resources.html#display-a-or-b这个元素，导致操作无响应。

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