使用 htmx 和 jinja 动态填写多行表单

Question

我有一个大订单，其中包含 table（以及 table 之外的一些字段）。我想根据输入的值动态填充每一行的最后一个单元格。我正在使用神社。

我的行如下所示：

<tr> 
<td> <input type="text" name="{{ row[0] }}_catalog_number" value="{{ row[1] }}"> </td> 
<td> <input type="text" name="{{ row[0] }}_description" value="{{ row[2] }}"> </td> 
<td> <input type="text" name="{{ row[0] }}_qty" value="{{ row[3] }}"> </td> 
<td> <input type="text" name="{{ row[0] }}_rate" 
                        placeholder="$" 
                        hx-trigger="keyup changed delay:500ms" 
                        hx-target="#{{row[0]}}-row-total" 
                        hx-swap="innerHTML"  hx-put="/{{row[0]}}/getitemtotal"> </td>
<td id="{{row[0]}}-row-total"> <input type="text" name="{{ row[0] }}_total" placeholder="$"> </td> 
</tr>

问题：没有发送任何请求...

{{ row[0] }} 是每行唯一的标识符。我检查了 HTML 并且一切都按预期呈现。 HTMX 本身在页面上有效，问题似乎与 table 无关（删除 table 并仅保留输入字段没有帮助）。

我怀疑 hx-target="#{{row[0]}}-row-total" 可能是罪魁祸首，因为如果我从 td id 和 hx-target 中删除 {{row[0]}}-，请求确实会发出（但响应将落在第一个 #row-total 可用，可能不正确）。

Answer 1

Dauros 发现了问题 - 请参阅上面的评论。将 row[0] 添加到 ID 会导致 ID 以数字开头。

使用 htmx 和 jinja 动态填写多行表单

Dynamically fill out multi-row form with htmx & jinja

jinja2

htmx