利用AJAX&；javascript使用Djangos消息传递框架创建toast

我遵循了一个教程，在尝试提交之前使用AJAX验证输入字段。我让它在我的django网站上工作；然而，我一直在用祝酒来提醒用户其他的动作，我不想从中得逞

$("#id_hub_name").focusout(function (e) {
    e.preventDefault();
    // get the hubname
    var hub_name = $(this).val();
    // GET AJAX request
    $.ajax({
        type: 'GET',
        url: "{% url 'validate_hubname' %}",
        data: {"hub_name": hub_name},
        success: function (response) {
            // if not valid user, alert the user
            if(!response["valid"]){
                alert("You cannot create a hub with same hub name");
                var hubName = $("#id_hub_name");
                hubName.val("")
                hubName.focus()
            }
        },
        error: function (response) {
            console.log(response)
        }
    })
})

这是我当前的JS，我想将警报功能改为使用toasts

在my base.html中，我使用以下命令来收听祝酒词并创建它们

{% if messages %}
    <div class="message-container">
        {% for message in messages %}
            {% with message.level as level %}
                {% if level == 40 %}
                    {% include 'includes/toasts/toast_error.html' %}
                {% elif level == 30 %}
                    {% include 'includes/toasts/toast_warning.html' %}
                {% elif level == 25 %}
                    {% include 'includes/toasts/toast_success.html' %}
                {% else %}
                    {% include 'includes/toasts/toast_info.html' %}
                {% endif %}
            {% endwith %}
        {% endfor %}
    </div>
{% endif %}

{%if消息%}
{消息%中的消息为%s}
{%将message.level作为级别%}
{%如果级别==40%}
{%include'includes/toast\u error.html%}
{%elif级别==30%}
{%include'包含/toasts/toast\u warning.html%}
{%elif级别==25%}
{%include'includes/toast\u success.html%}
{%else%}
{%include'includes/toast\u info.html%}
{%endif%}
{%endwith%}
{%endfor%}
{%endif%}

---

提前感谢

您只需要为toast添加html元素

首先，松开

{%if messages%}

，确保模板中始终存在

。如果没有消息，它将只是一个空的

div

。您还需要在js中添加祝酒词的模板，这样您就可以从js中添加祝酒词

现在，您可以在ajax响应之后为toast添加模板

比如：

function show_alert_from_js(alert_type, text) {
        msg = `<<your template here>>${text}`;  // to render the text message to show.
        msg_html = $.parseHTML(msg);
        $('.message-container').append(msg_html);
}

$.ajax({
        type: 'GET',
        ...
        success: function (response) {
            if(!response["valid"]){
                show_alert_from_js("error", "You cannot create a hub with same hub name")
            ...

})

函数显示来自\u js的\u警报（警报类型，文本）{
msg=`${text}`；//以呈现要显示的文本消息。
msg_html=$.parseHTML（msg）；
$（'.messagecontainer'）.append（msg_html）；
}
$.ajax({
键入：“GET”，
...
成功：功能（响应）{
如果（！响应[“有效”]）{
显示来自_js的_警报（“错误”，“您无法使用相同的中心名称创建中心”）
...
})

Hi Aman，太好了，它很管用！！谢谢。接下来的一个问题是，我该如何设置烤面包的样式？我一直在使用标准的引导式烤面包来显示警报。但是，如果我尝试将其嵌入html，它会在页面呈现时显示，而不会显示警报。您可以使用

$（“#元素”）。烤面包（'show'）

，使其随时可见。