Ajax 向Django应用程序添加面向用户的自定义表单(使用selectize和taggit)
我是django的新手,我正试图弄清楚如何使用小部件(或)创建表单。我在网上找到的所有东西都涉及到它在管理页面上的使用,但我希望标签面向用户并可编辑——就像我在本文下面创建的标签一样。到目前为止,我已经确定需要使用小部件创建表单:Ajax 向Django应用程序添加面向用户的自定义表单(使用selectize和taggit),ajax,django,django-forms,selectize.js,django-taggit,Ajax,Django,Django Forms,Selectize.js,Django Taggit,我是django的新手,我正试图弄清楚如何使用小部件(或)创建表单。我在网上找到的所有东西都涉及到它在管理页面上的使用,但我希望标签面向用户并可编辑——就像我在本文下面创建的标签一样。到目前为止,我已经确定需要使用小部件创建表单: # models.py from taggit_selectize.managers import TaggableManager tags = TaggableManager() # forms.py from taggit_selectize.widge
# models.py
from taggit_selectize.managers import TaggableManager
tags = TaggableManager()
# forms.py
from taggit_selectize.widgets import TagSelectize
from .models import MyModel
class TagForm(forms.ModelForm):
class Meta:
model = MyModel
fields = ('tags',)
widgets = {'tags': TagSelectize(),}
但我不知道如何在模板中包含此表单,以便它出现在我的MyModel
对象旁边。理想情况下,我想我希望它的行为像这样,我可以调用{%render\u comment\u form for obj%}
,然后结束
更新 我已经编辑了
视图
(见下文),现在可以访问模板中的表单,但我似乎无法提交我的标记(理想情况下,这也不会触发重定向)
#views.py
from.forms导入标记表单
def显示_标签(请求):
返回呈现(请求'tags.html',{'tagform':tagform})
#tags.html
{{tagform.media}
{{tagform.as_p}}
所以,我终于找到了答案。它包括将标记表单包装在
标记中并捕获POST请求。作为记录,这是一个项目的一部分,该项目涉及使用Haystack返回一个结果列表,然后我要标记这些结果。Myviews.py
将一个SearchView
子类化,而不是像我在这里所做的那样定义一个函数(show_tags()
),而不是每页一个对象,我有多个
对于页面上的对象obj,您有以下内容
# views.py
from .forms import TagForm
from .models import MyModel
from django.views.decorators.http import require_POST
from django.views.decorators.csrf import csrf_exempt
def show_tags(request):
# Perhaps the request specifies the object, but
# for simplicity's sake we just pick a specific model instance
object = MyModel.objects.filter(pk = 123)
return render(request, 'tags.html', {'tagform' : TagForm,
'obj' : MyModel})
@require_POST
@csrf_exempt
def create_tag(request):
# See javascript below for creation of POST request
data = request.POST
tag_text_raw = data.get('tag_data')
# clean_tag() not shown, but it splits the serialized
# tag_text_raw and returns a list of strings
tag_text_clean = clean_tag(tag_text_raw)
obj_pk = data.get('obj_pk')
#save tags to document
doc = DocInfo.objects.get(pk = obj_pk)
doc.tags.add(*tag_text_clean)
# not strictly necessary; mainly for logging
response_data = {'tag_text': tag_text_clean,
'obj_pk': obj_pk
}
return JsonResponse(response_data)
因此,show_tags
使用render
将信息发送到模板,然后模板可以访问这些对象。这对我来说一开始是没有意义的
# tags.html (extends base.html)
{% block scripts %}{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}js/ajaxtag.js"></script>
{{ tagform.media }}
{% endblock %}
{{ obj.text }}
<form method="post" action="create_tag/" id="tag-form-{{ obj.pk }}" name="tag-form-obj" data-object-id={{ obj.pk }}>
{{ tagform.as_p }}
<input type="submit" name ="tag-form-input" value="Add Tags" />
</form>
最后,urls.py
将请求发送回create\u tag()
# tags.html (extends base.html)
{% block scripts %}{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}js/ajaxtag.js"></script>
{{ tagform.media }}
{% endblock %}
{{ obj.text }}
<form method="post" action="create_tag/" id="tag-form-{{ obj.pk }}" name="tag-form-obj" data-object-id={{ obj.pk }}>
{{ tagform.as_p }}
<input type="submit" name ="tag-form-input" value="Add Tags" />
</form>
#ajaxtag.js
(function($)
{
// A stripped-down version of ajaxcomments.js from fluent_comments
// See that file for further expansions
$.fn.ready(function () {
var tagform = $('form[name="tag-form-obj"]');
if (tagform.length > 0) {
// Detect last active input.
// Submit if return is hit
tagform.find(':input').focus(setActiveInput).mousedown(setActiveInput);
tagform.submit(onTagFormSubmit);
}
});
function onTagFormSubmit(event)
{
event.preventDefault(); // prevents redirect
var form = event.target;
create_tag(form);
return false;
}
function create_tag(form)
{
console.log("create_tag is working!") // sanity check
var $form = $(form);
var tag_text = $form.serialize();
var url = $form.attr('action');
var obj_id = $form.attr('data-object-id')
$.ajax({
url : url,
type: "POST",
data: { tag_data: tag_text, obj_pk: obj_id},
success: function (data) {
data;
console.log(data);
console.log('success');
},
error: function (xhr, errmsg, err) {
// Return error to console
console.log(xhr.status + ": " + xhr.responseText)
}
});
}
function setActiveInput() {
active_input = this.name;
}
})(window.jQuery);
# urls.py
from .views import create_tag
...
url(r'^create_tag', create_tag, name = 'tag-form')
...