标签: htmx

我有一个包含多个表单的页面。

如果用户提交表单，则仅应提交当前表单（而不是页面的其他表单）。

在服务器上，表单得到验证。

情况 1：如果验证失败，则服务器将 html 发送到客户端，并且应交换特定表单，并将新表单添加到 DOM 中。此新表单包含一条错误消息。用户现在可以修复他的错误并再次提交表单。

情况2：表单验证成功，数据已保存。现在我想在客户端触发全页重定向。

我阅读了 htmx hx-target的文档。我设法让 case-1 工作（我喜欢 htmx 的这个功能）。

但是服务器如何触发全页重定向呢？

我用的是htmx与 Django 表单库一起使用。

这是我的模板：

<table>\n <tr hx-post="{{ object.get_absolute_url }}" hx-swap="outerHTML" \n     hx-trigger="changed">\n  <th>{{ object.leg.start }}</th>\n  <th>--&gt;</th>\n  <th>{{ object.leg.end }}</th>\n  <th>{{ object.leg.distance }}m</th>\n  <th>{{ object.leg.difficulty_verbose }}</th>\n  <td>{{ form.runner }} {{ form.runner.errors }}</td></tr>\n</table>\n

这是创建的 html：

<table>\n <tr hx-post="/leg/155/Talfreunde/ %}" hx-swap="outerHTML" hx-trigger="changed">\n  <th>Sch\xc3\xb6neck</th>\n  <th>--&gt;</th>\n  <th>M\xc3\xbchlleithen</th>\n  <th>13400m</th>\n  <th>hard</th>\n  <td>\n    <select name="runner" required id="id_runner">\n     <option value="">---------</option>\n     ...\n    </select>\n  </td>\n </tr>\n</table>\n

我希望它<tr>表现得像一个表格。

我试图找到一种方法来告诉hx-trigger监听<select>.

如何让htmx在更改后立即提交数据select？

背景：这是一场接力赛，每条赛程将在桌子上占据一行。

我想知道在输入中发送请求之前是否可以设置最小字符数？

我想使用tom-select作为 Django 自动完成选择小部件。

在相应的数据库表（Runners）中有数百行，因此我无法将所有行加载到html页面中。

在模型中RaceTeam我有一个外键到Runner.

选择小部件将在整个页面和 html 片段中使用（通过htmx）。

我尝试了 subclass django.forms.Select，但这会将所有数据库行吸进widget.choices.

我正在使用HTMX，并且希望有一个<select>表单字段可以自动将特定 URL 加载到<div>.

“值选择”示例与此想法类似，但它包含值作为查询参数，例如/models?make=audi。我想为每个都使用一个特定的 URL <option>。

这是我认为应该有效的近似值。

<select name="make" hx-target="#models">
  <option hx-get="/models/audi">Audi</option>
  <option hx-get="/models/toyota">Toyota</option>
  <option hx-get="/models/bmw">BMW</option>
</select>

<div id="models">
  <!-- hx-get results would go here -->
</div>

但是，这不起作用，我无法找到实现我所描述内容的方法。我怎样才能实现预期的行为？

编辑： 相关 Twitter 线程

我的项目中有一个 htmx 指示器，用于在重新加载页面的一部分时显示。但是，我注意到加载指示器在初始页面渲染期间呈现，然后淡出：

htmx-indicator 不应该一开始就隐藏吗？我需要添加什么来确保它开始隐藏，并且只显示在我的 htmx 负载上？

这是 html 的片段（该项目使用 django 和 bootstrap）（我在调整时将许多样式硬编码在 html 中）：

            <div class="spinner-wrapper position-absolute htmx-indicator" style="top:0; left:0; width:100%; height:100%; z-index: 1000; pointer-events:none;">
                <div class="d-flex justify-content-center align-items-center position-relative" style="height:100%;">
                    <div class="spinner-border text-info" style="width: 4rem; height: 4rem;" role="status">
                    </div>
                </div>
            </div>

我没有对默认的 htmx CSS 样式进行调整。

我有一个登录表单，标记如下：

<div id="login_form" hx-ext="response-targets">
    <form action="/login" method="POST" hx-boost="true" hx-target="#login_form" hx-target-400="#login_form" hx-swap="innerHTML">
        ...
        <button type="submit">Log in</button>
    </form>
</div>

当出现错误时，后端会返回包含错误概述的表单，并带有 400 状态代码（因此是response-targets扩展）。成功后，后端响应HX-Location用户个人资料页面的标题，我希望用户被重定向。简单地说：

1. 出现错误时应重新呈现表单（400 错误请求）
2. 成功后用户应该被重定向到他们的个人资料页面（200 OK）

实际发生的情况是，HTMX 呈现整个用户的个人资料页面而#login_form不是重定向，就好像hx-target覆盖或优先于HX-Location标头一样。

没有response-target插件的情况下尝试过，效果是一样的。使用response-target插件我不能省略，hx-target因为那时hx-target-400无法识别或处理。

如何将它们组合在一起，以便在出现错误时重新呈现表单，或在成功时重定向到页面？

过去我使用Post/Redirect/Get模式：

• html已通过POST提交到服务器
• 服务器处理数据。
• 如果一切正常，服务器将响应 http 302（重定向
• 客户端将页面重定向到新位置。

如果您通过htmx提交 html 片段，还需要这样做吗？

我正在使用 Django，有没有办法检查当前请求是否来自 HTMX

我非常有兴趣在编写移动应用程序时将 htmx 的生产力引入其中。有人有在 Ionic 或 Cordova 中使用 htmx 的经验吗？应用商店有反馈吗？