如何解决Django-autocomplete-light 未以引导模式形式显示
我正在设置一个主页，其中应包含引导模式表单。这部分工作正常。
但是一旦我尝试实现 Django-autocomplet-light (DAL) 小部件，事情就开始变得复杂。
class TagAutocomplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
qs = Tag.objects.all()
if self.q:
qs = qs.filter(name_de__icontains=self.q)
return qs
具有以下url配置
urlpatterns = [
path('tag-autocomplete',views.TagAutocomplete.as_view(create_field='name_de'),name='tag-autocomplete'),path('sound-create/<int:category_id>',views.soundCreateView.as_view(),name='sound-create'),path('image-create/<int:category_id>',views.ImageCreateView.as_view(),name='image-create'),]
我有两个相似的 ModelForm：
class ImageForm(forms.ModelForm):
class Meta:
model = Image
form_tag = False
fields = ('solution','image_file','difficulty','explicit','tags','category')
widgets = {'tags': autocomplete.ModelSelect2Multiple(url='gamefiles:tag-autocomplete'),}
class SoundForm(forms.ModelForm):
class Meta:
model = Sound
form_tag = False
fields = ('solution','sound_file','category')
widgets = {'tags': autocomplete.ModelSelect2Multiple(url='gamefiles:tag-autocomplete'),}
有相应的意见：
class ParentCreateView(CreateView):
def get_initial(self):
return {
'category': self.kwargs['category_id'],}
def form_valid(self,form):
tags = form.cleaned_data["tags"]
self.object = form.save()
self.object.tags.add(*tags)
return render(self.request,'success.html',{'element': self.object})
class ImageCreateView(ParentCreateView):
model = Image
form_class = ImageForm
template_name = 'image_create_form.html'
def get_context_data(self,**kwargs):
ctx = super(ImageCreateView,self).get_context_data(**kwargs)
ctx['category_id'] = self.kwargs['category_id']
return ctx
class SoundCreateView(ParentCreateView):
model = Sound
form_class = SoundForm
template_name = 'sound_create_form.html'
def get_context_data(self,**kwargs):
ctx = super(SoundCreateView,self).get_context_data(**kwargs)
ctx['category_id'] = self.kwargs['category_id']
return ctx
我的 index.html 加载了一些静态资源：
{% load static %}
<!doctype html>
<html>
<head>
<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap-grid.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap-reboot.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="{% static 'js/jquery.form.js' %}"></script>
{% block head %}
{% endblock %}
</head>
<body id="bootstrap-overrides">
...
<div class="container" id="content">
{% block content %}
{% endblock %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
{% block footer %}
{% endblock %}
</html>
category-detail.html（扩展 index.html）定义了模态和触发模态的按钮。它还加载用于自动完成的静态文件（而不是使用 {{ form.media }}，这似乎不适用于模态）。根据当前的 url，图像或声音表单会加载到模态中。
{% extends "index.html" %}
{% load static %}
{% block head %}
<!-- autocomplete CSS -->
<link href="{% static 'admin/css/vendor/select2/select2.css' %}" rel="stylesheet">
<link href="{% static 'admin/css/autocomplete.css' %}" rel="stylesheet">
<link href="{% static 'autocomplete_light/select2.css' %}" rel="stylesheet">
{% endblock %}
{% block content %}
<!-- Modal -->
<div id="createCategoryElement" class="modal" tabindex="-1" role="dialog" aria-labelledby="createCategoryElement" aria-hidden="true">
</div><!-- modal -->
<div class="container">
<div class="row">
<div class="col-12">
<h1>{{ category.name_de }}</h1>
</div>
</div>
<div class="row">
<div class="col-lg-1 col-3 align-self-center">
{% if game_type == 1 %}
<a data-toggle="modal" data-target="#createCategoryElement" class="btn btn-primary btn-lg" href="{% url 'gamefiles:image-create' category_id=category.id %}"><i class="fa fa-plus"></i></a>
{% elif game_type == 2 %}
<a data-toggle="modal" data-target="#createCategoryElement" class="btn btn-primary btn-lg" href="{% url 'gamefiles:sound-create' category_id=category.id %}"><i class="fa fa-plus"></i></a>
{% endif %}
</div>
</div>
</div>
<script src="{% static 'admin/js/vendor/select2/select2.full.js' %}"></script>
<script src="{% static 'autocomplete_light/autocomplete_light.js' %}"></script>
<script src="{% static 'autocomplete_light/select2.js' %}"></script>
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0,name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
console.log(csrftoken);
//Ajax call
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
crossDomain: false,// obviates need for sameOrigin test
beforeSend: function(xhr,settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSrftoken",csrftoken);
}
}
});
$('#createCategoryElement').on('show.bs.modal',function (event) {
var modal = $(this)
var segments = $(location).attr('href').split( '/' );
var url_base = segments[0]+"//"+segments[2]+"/"+segments[3]+"/";
let game_type;
if (segments[4] === '1') {
game_type = 'image-';
} else if (segments[4] === '2') {
game_type = 'sound-';
}
var category_id = segments[5];
$.ajax({
url: url_base+game_type+"create/"+category_id,context: document.body
}).done(function(response) {
modal.html(response);
});
})
</script>
{% endblock %}
image-create-form.html 和 sound-create-form.html 定义表单内容：
{% load widget_tweaks %}
{% load i18n %}
{% load static %}
<div class="modal-dialog" role="document">
<form id="image-create" action="{% url 'gamefiles:image-create' category_id=category_id %}" method="post">{% csrf_token %}
<div class="modal-content rounded-0">
<div class="modal-header">
<h2 class="modal-title">Neu</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div><!-- modal-header -->
<div class="modal-body">
<div class="row">
<div class="col-12 form-group">
{{ form.image_file.label_tag }}
{% render_field form.image_file class="form-control" %}
</div>
<div class="col-12 form-group">
{{ form.tags.label_tag }}
{% render_field form.tags class="form-control" %}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Abbrechen</button>
<input type="submit" class="btn btn-primary" value="Save" />
</div><!-- modal-footer -->
</div><!-- modal-content -->
</form>
</div><!-- modal-dialog -->
<script>
var form_options = { target: '#createCategoryElement',success: function(response) {} };
$('#image-create').ajaxForm(form_options);
</script>
sound-create-form.html
{% load widget_tweaks %}
{% load i18n %}
{% load static %}
<div class="modal-dialog" role="document">
<form id="sound-create" action="{% url 'gamefiles:sound-create' category_id=category_id %}" method="post">{% csrf_token %}
<div class="modal-content rounded-0">
<div class="modal-header">
<h2 id="category-element-modal-title" class="modal-title">Neu</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div><!-- modal-header -->
<div id="category-element-modal-body" class="modal-body">{{ form.media }}
<div class="row">
<div class="col-12 form-group">
{{ form.sound_file.label_tag }}
{% render_field form.sound_file class="form-control" %}
</div>
<div class="col-12 form-group">
{{ form.tags.label_tag }}
{% render_field form.tags class="form-control" %}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Abbrechen</button>
<input type="submit" class="btn btn-primary" value="Save" />
</div><!-- modal-footer -->
</div><!-- modal-content -->
</form>
</div><!-- modal-dialog -->
<script>
var form_options = { target: '#createCategoryElement',success: function(response) {} };
$('#sound-create').ajaxForm(form_options);
</script>
即使两种形式的代码基本相同，标签小部件仍能正确显示为图像形式的 DAL
我有更多带有 DAL 小部件的表单，但图像表单是唯一可以正确加载它的表单。
您是否有任何线索，是什么导致小部件未以所有其他模态形式显示？
非常感谢任何帮助。
干杯！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
