django-bootstrap5 libを使用するときにこれを行う方法：
カスタムmessages.htmlテンプレートを返すだけのメッセージビューに対してAJAXgetリクエストを作成します。
さて、私はこの問題に関してこれまでに行われた作業のいくつかをレビューし、おそらく上記の複製であるきちんとした解決策を思いつきました、しかし私の投稿は私がコーダーのためにこの問題を具体的に解決しているという点でそれらとは異なりますdjango-bootstrap5を使用します。したがって、それがあなたである場合は、さらに読んでください。これで問題が解決する可能性があります。
これは、一部のIDE<DefaultApp>がDjangoプロジェクト用に作成するデフォルトのアプリです。私の現在のプロジェクトはと呼ばれAbstractSpacecraft、サブフォルダーも呼び出されます。このサブフォルダーには、デフォルトのアプリがAbstractSpacecraft含まれています。settings.py
<DjangoProject>/<DefaultApp>/javascript_tools.js：
window.messages_tag_id = "#django-messages-div";
window.messages_url = null;
function load_html_from_url(url, elem) {
$.get(url, function(data, status) {
elem.html(data);
});
}
function display_django_messages() {
messagesDiv = $(window.messages_tag_id);
messagesDiv.empty();
load_html_from_url(window.messages_url, messagesDiv);
}
function post_string_to_url(data, url)
{
$.ajax({
type: 'POST',
url: url,
data: data,
success: function(data, status, xhr) { // Function( Anything data, String textStatus, jqXHR jqXHR )
if ('msg' in data) {
const msg = data['msg'];
console.log(msg);
display_django_messages();
}
},
error : function(xhr, errmsg, err) {
// Provide a bit more info about the error to the console:
if (errmsg) {
console.log('ERROR: ' + errmsg);
display_django_messages();
}
console.log(xhr.status + ": " + xhr.responseText);
}
});
}
function csrf_safe_method(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function setup_ajax_csrf_token(csrf_token) {
// BUGFIX. This took hours to get to work!
// And remember the csrf_token line at the top of template
window.csrf_token = csrf_token;
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrf_safe_method(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrf_token);
}
}
});
}
`
<DjangoProject>/templates/<AppName>/your_template.html（関連部品のみ）：
<script>
$(document).ready(function()
{
// Remember to call this!
setup_ajax_csrf_token("{{ csrf_token }}");
let ui = window.ui;
$("#diagram-name-form").submit((event) => {
event.preventDefault();
const data = {
"diagram name" : $("#diagram-name-input").val(),
"diagram id" : "{{ diagram_id }}",
};
const set_name_url = "{% url 'set_model_string' Model='Diagram' field='name'%}";
post_string_to_url(data, set_name_url, "{% url 'messages' %}");
});
});
</script>
.....
<div class="form-outline">
<form class="row row-cols-lg-auto g-3 align-items-center" method="post"
id="diagram-name-form">
{% csrf_token %}
<input type="text" id="diagram-name-input" class="form-control" placeholder="Diagram name?" />
</form>
</div>
<DjangoProject>/templates/<DefaultApp>/messages.html：
{% load django_bootstrap5 %}
{% autoescape off %}{% bootstrap_messages %}{% endautoescape %}
<DjangoProject/<DefaultApp>/views.py：
from django.shortcuts import render
from django.views.generic.base import TemplateView, View
class MessagesView(View):
template_name = 'AbstractSpacecraft/messages.html'
def get(self, request, *args, **kwargs):
return render(request, self.template_name)
<DjangoProject>/<DefaultApp>/base.html：
{% block bootstrap5_content %}
{% block as_navbar %} <!-- as = AbstractSpacecraft -->
....
{% endblock %}
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row" id="django-messages-div">
{% autoescape off %}{% bootstrap_messages %}{% endautoescape %}
</div>
{% block content %}{% endblock %}
</div>
</div>
</div>
{% endblock %}
....
基本的に、ajax POSTリクエストからOKを受け取った後、ajax GETリクエストを実行します。すべてが機能しているので、機能する可能性がありmessagesDiv.load(url)ますが、Chrome DevToolsの[ネットワーク]タブを表示し、トラフィックアナライザーでは、すべてが機能しているときにPOSTリクエストとそれに続くGETリクエストが表示されます。
ajax GETは単純にmessages.htmlテンプレートを取得し、それをメッセージについて新たに知ったもので埋めます。messageDivただし、メッセージがGUIに積み重ならないように、最初のメッセージを必ずクリアしてください。