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

Question

我有一个大的订单表单，其中包含一个表(和一些字段外的表太)。我想根据输入的值动态填充每行的最后一个单元格。我在用jinja。

下面是我的行:

<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，一切都按预期呈现。这样的html在页面上工作，问题似乎与表无关(删除表并只留下输入字段没有帮助)。

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

Answer 1

Dauros发现了这个问题-参见上面的评论。在id前加上行[0]，会得到一个以数字开头的id。