Django在用户更新表单后弹出消息(modal)

Question

如果用户用成功的弹出消息更新数据，我该怎么办？对于我的情况，在用户更新数据后，它需要新的选项卡才能看到成功的消息，我想弹出消息而不是新的选项卡页面来查看成功的消息

我在我的html 上有这个代码

<form method="post" action="/reactivate/" id="your-form"  enctype="multipart/form-data" autocomplete="on" class="btn btn-info  modal-ajax-load"
data-ajax-link="url"
data-toggle="modal"
data-modal-title="tilte"
data-target="#general_modal">{% csrf_token %}
{% for me in ako %}
Date: <input type="hidden" value="{{me.enddate}}" name="date" id="start_date">{{me.enddate}}
<input type="hidden" value="{{me.id}}" name="id" hidden><p>{{me.Email}}</p>
{% endfor %}
<select id="days">
{% for perfume in s %}
<option value="{{perfume.adddate}}" data-days="{{perfume.adddate}}" id="days">{{perfume.product}}  -  {{perfume.adddate}} Days</option>
{% endfor %}
</select>
<br><br><br>
<label>Deadline:</label><br>
<input type="date" name="endate" id="end_date" readonly/>
<input type="submit" value="Sign up" />
</form>
<div id="general_modal" class="modal fade " >
<div class="modal-dialog ">
<div class="modal-content ">
<div class="modal-header bg-info">
<h6 class="modal-title">Info header</h6>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<!-- Empty will be field by Js -->
</div>
</div>
</div>
</div>

这是我的脚本

<script>
$("#your-form").on('submit',function(e){
e.preventDefault();
var ajax_link = this.getAttribute("data-ajax-link");
var target = this.getAttribute("data-target");
var title = this.getAttribute("data-modal-title");
var size = this.getAttribute("data-modal-size");
var bg = this.getAttribute("data-modal-content-bg");
// $(target+" .modal-body").load(ajax_link);
$.ajax({
url:ajax_link,
type:'POST',
// data: $("#your-form-feilds").serialize(),
success: function (response){
$(target+" .modal-body").html(response);
},
/*
error:function (response){
new PNotify({
title: 'oops',
text:' Unable to load',
type: 'error'
});
}
*/
});
$(target+" .modal-content").addClass(bg);
$(target+" .modal-title").html(title);
$(target+" .modal-dialog").removeClass().addClass("modal-dialog");
$(target+" .modal-dialog").addClass(size);
</script>

这是我的观点.py

def reactivate(request):
id = request.POST.get('id')
date = request.POST.get('endate')
update = User.objects.get(id=id)
update.enddate = date
update.save()
messages.info(request, 'Your data has been changed successfully!')
return HttpResponse(json.dumps({"success":True}), content_type="application/json")

Answer 1

我也有同样的问题，我用奇怪的方法解决了它

id = request.POST.get('id')
date = request.POST.get('endate')
update = User.objects.get(id=id)
update.enddate = date
update.save()
print("dasdasd")
messages.info(request, 'Your Account has been changed successfully!')
obj = your_model.objects.filter(id=id)
s = obj.objects.all()
return render(request, 'myProfile.html', {"ako": ako, "s": s})

我没有使用任何脚本或jquery

{% if messages %}
{% for msg in messages %}
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
{{msg.message}}
</div>
{% endfor %}
{% endif %}

Answer 2

面对同样的问题，问题很容易解决该模式弹出窗口将在3秒内消失

视图.py

from django.contrib import messages
from .forms import ContactForm
def contact(request):
if request.method == "POST":
contact = ContactForm(request.POST)
if contact.is_valid():
contact.save()
messages.success(request, 'Your Form has been Submitted Successfully')
contact = ContactForm()
else:
messages.error(request, 'Invalid form submission.')
else:
contact = ContactForm()
return render(request, 'home/index.html',{'form': contact})

messages.html

{% if messages %}
{% for message in messages %}
<!-- Modal pop-up and auto close -->
<div class="modal bg-muted fade" id="myModal" role="dialog">
<div class="modal-dialog modal-dialog ">
<!-- Modal content-->
<div class="modal-content">
<h5 class="modal-title">{{message}}</h5>
</div>
</div>
</div>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
</script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
</script>
<script>
$(document).ready(function(){
$("#myModal").modal("show");
setTimeout(function(){
$('#myModal').modal('hide')
}, 4000);
});
</script>
{% endfor %}
{% endif %}

在base.html文件中，通过｛%include‘messages.html’%｝包含messages.html

就是这样。