如何将HTMX参数附加到django输入表单

ef1yzkbh  于 2023-08-08  发布在  Go
关注(0)|答案(1)|浏览(139)

我正在尝试实现一个HTMX自动搜索功能到一个django表单创建的输入。当我检查页面上的元素时,htmx标记都存在。但是,htmx从不初始化,也从不转到views端点。django输入表单的代码如下:

widget_attrs_nha_autosearch = {
    'class': 'form-control',
    'data-user-entry': 1,
    'disabled': value.get('read_only'),
    'hx-post': "{% url 'ng_django_pmp:nha-autosearch' %}",
    'hx-target': '#results',
    'hx-trigger': "keyup changed delay:500ms"
}

if value.get('label') == 'nha_override':
    self.fields[field] = forms.CharField(
        initial=value.get('default', ''),
        label=value.get('label'),
        max_length=value.get('max_length'),
        required=required,
        widget=forms.TextInput(attrs=widget_attrs_nha_autosearch),
        validators=value.get('validators', []))

字符串
当我尝试在html中自己创建htmx代码时,它工作得很好。但是,我需要以这种方式创建代码,以便在后端正确触发一些东西。HTMX代码本身如下:

{% csrf_token %}
<div class="d-flex justify-content-end mb-4">
       <input type="input"
              hx-post="{% url 'ng_django_pmp:nha-autosearch' %}"
              hx-target='#results'
              hx-trigger="keyup changed delay:500ms"
              name="search"
              class="d-flex flex-grow-1 flex-column p-3 border border-secondary rounded m-2"
              style="overflow: auto;
                     min-width: 0;
                     min-height: 0"
              placeholder=""
              id='id_nha_override' />
</div>
<div id="results"></div>


我错过了什么吗?

g2ieeal7

g2ieeal71#

我怀疑您试图在视图中使用模板评估来创建表单,并且当表单被评估时,它是与模板分开完成的。不要使用模板过滤器{% url %},而是尝试reverse(),例如,
而不是'hx-post': "{% url 'ng_django_pmp:nha-autosearch' %}",
尝试'hx-post':reverse('ng_django_pmp:nha-autosearch')

相关问题