Django - показ модала bootstrap после успешного сохранения данных в БД
Я новичок в Django и на данный момент я создал очень простую страницу со статьей, я надеюсь, что когда я успешно сохраню статью, она покажет сообщение модального стиля bootstrap
model.py
from django.db import models
from django.utils import timezone
class Article(models.Model):
title = models.CharField(max_length=100,blank=False,null=False)
slug = models.SlugField()
content = models.TextField()
cuser = models.CharField(max_length=100)
cdate = models.DateField(auto_now_add=True)
mdate = models.DateField(auto_now=True)
forms.py
from .models import Article
from django.forms import ModelForm
class ArticleModelForm(ModelForm):
class Meta:
model = Article
fields = [
'title',
'content',
]
views.py
from django.shortcuts import render
from .forms import ArticleModelForm
from django.contrib.auth.decorators import login_required
from .models import Article
@login_required
def create_view(request):
form = ArticleModelForm(request.POST or None)
context={
'form':form
}
if form.is_valid():
article_obj = Article(cuser=request.user)
form = ArticleModelForm(request.POST,instance=article_obj)
form.save()
context['saved']=True
context['form']=ArticleModelForm()
return render(request,'article/create.html',context= context)
мой шаблон > article/create.html
{% extends 'base.html' %}
{% block content %}
<form method="POST">
{% csrf_token %}
{{form.as_p}}
<div><button data-bs-toggle="modal" data-bs-target="#saveModal" type="submit">create</button></div>
</form>
{% if saved %}
<div class="modal fade" id="saveModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>save successfully!</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal">
</button>
</div>
</div>
</div>
</div>
{% endif %}
{% endblock content %}
Я использую переменную saved в файле views.py, чтобы определить, было ли содержимое статьи успешно сохранено, и если да, то установить ее в контексте
В шаблоне, если сохранение существует, будет представлен код, связанный с модалом, но таким образом неудачный ....
Проблема заключается в самом modal
, когда вы отправляете форму, форма отправляется, но когда она сопровождается saved=True
, то также необходимо нажать на кнопку модала для отображения сообщения saved successfully
, что невозможно. Поэтому другой альтернативой является использование классов alert
в boostrap (вы можете применить к ним свои собственные стили, но ниже приведен только пример), поэтому попробуйте этот шаблон:
<form method="POST">
{% csrf_token %}
{{form.as_p}}
<div><button type="submit">create</button></div>
</form>
{% if saved %}
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Saved successfully.</strong>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{% endif %}
Вы должны поддерживать отдельные условия для запросов GET
и POST
, а также повторно отображать шаблон с saved=True
, поэтому попробуйте следующее представление:
@login_required
def create_view(request):
if request.method == "POST":
article_obj = Article(cuser=request.user)
form = ArticleModelForm(request.POST, instance=article_obj)
if form.is_valid():
form.save()
context = {
"form": ArticleModelForm(),
"saved": "yes"
}
return render(request, "article/create.html", context)
else:
print("form is not valid")
else: # GET method
form = ArticleModelForm()
return render(request, 'article/create.html', {"form": form})