Django中使用Ajax/Dajax的动态表单

Question

我有一个简单的表单，用来显示工作对象，让用户可以选择一个。现在，我想添加一组两个单选按钮，让用户选择一个“过滤选项”。如果用户选择了“组”这个过滤选项，我希望能出现一个下拉框，让他们选择想要过滤的组。我想做到这一点，而不需要重新加载页面，所以我打算使用dajax。

我在dajax的网站上找到了一个类似的例子，但我没能让它正常工作。单选按钮可以显示出来，下拉框也出现了（但是是空的）。当我点击“组”这个单选按钮时，下拉框应该填充我所有的组对象，但它没有。

我在这个问题上卡了很久，所以任何帮助都将非常感激。

forms.py

filters = (('0', 'Group'), 
           ('1', 'Host'), 
          )

class JobSelectForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super(JobSelectForm, self).__init__(*args, **kwargs)
        self.fields['jobs'].widget.attrs["size"] = 20
    jobs = forms.ModelChoiceField(queryset=Job.objects.all().order_by('name'), empty_label=None,)
    filter = forms.ChoiceField(choices=filters,
                               widget=forms.RadioSelect(attrs={'onchange': "Dajaxice.tdportal.updatefilter(Dajax.process,{'option':this.value})", 'name':'combo1', 'id':'combo1', }, 
                                                        renderer=HorizRadioRenderer),

ajax.py

def updatefilter(request, option):
    dajax = Dajax()
    options = [Group.objects.all(),
               Host.objects.all(),
               ]
    out = ""
    for o in options[int(option)]:
        out = "%s<option value='#'>%s" % (out,o,)

    dajax.assign('#combo2','innerHTML',out)
    return dajax.json()

dajaxice_functions.register(updatefilter)

template

    {{selectForm.filter.label}}: {{selectForm.filter}}
    <br>
    <select name="combo2" id="combo2" onchange="" size="1"></select>
    <br><br>
    <form method="post" action="/tdportal/jobs/">{% csrf_token %}
        {{selectForm.jobs}}
        <br><br>
        <input type="submit" value="Edit" />   <a href="/tdportal/jobs/new/"><input type="button" name="new" value="New" /></a>
    </form>

Answer 1

我觉得你在这里忘记加一个 % 符号（value='#'）和一个结束的 </option> 标签了：

out = "%s<option value='%s'>%s</option>" % (out,o,o)

Answer 2

你需要在选择框的 onchange 事件中添加你的 dajaxice 函数，这样才能在模板中引用这个函数。

可以这样做：

<select name="combo2" id="combo2" onchange="Dajaxice.your_project.your_appname.updatefilter(Dajax.process,{'option':this.value}" size="1"></select>

（把 your_project 替换成你的项目名称，把 your_app 替换成你的应用名称）。

另外，确保在你的模板中有所有必要的头部信息（而且这些信息确实存在；比如，如果你查看源代码，可以点击它们）。

记得使用谷歌浏览器的检查工具（Ctrl-Shift-I）或者火狐浏览器的 Firebug 来调试。

编辑：我现在注意到你在表单中有类似的东西。查看源代码时，它在 HTML 中是怎么显示的？有没有被错误地转义？