BootStrap Django Jquery Modal在Ajax调用提交时未关闭

BootStrap Django Jquery Modal Not Closing on Ajax Call Submit

本文关键字:提交 调用 Ajax Django Jquery Modal BootStrap      更新时间:2023-09-26

我有一个用于显示弹出窗口的模式,当你点击发布按钮时,它会调用ajax函数,我也有一个模式切换,但它在提交时不会切换模式,我不知道如何修复它。

div类

<div class="modal fade bs-example-modal-sm2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id='post_modal'>
  <div class="modal-dialog modal-sm2">
    <div class="modal-content">
        {% if is_user_profile %}
        <div id='make_post' styly='padding:7px;'>
                <form method='POST'>
                {% csrf_token %}
                title: <input type ='text' id='post_title'><br>
                post:<textarea id='post_text'></textarea><br>
                <button id='makepost' type="button" class="btn btn-primary" data-dismiss="modal">Post</button>
                {% for user in user_data %}
                <input type='hidden' id='username' value='{{user.username}}' >
                {%endfor%}
                </form>
        </div>      
        {%endif%}   
    </div>
  </div>
</div>

ajax调用

            $("#makepost").click(function() {
                    var post_title = document.getElementById("post_title").value;
                    var post_text = document.getElementById("post_text").value;
                    var username = document.getElementById("username").value;
                    $.ajax({
                        url : "/makepost/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            csrfmiddlewaretoken: '{{ csrf_token }}',
                            username: username,
                            post_title: post_title,
                            post_text: post_text,
                            },
                            success : function(json) {
                                document.getElementById('output').innerHTML = (json['message']);
                                updatePostSection(json['user_posts']);
                            },
                            error : function(xhr,errmsg,err) {
                                console.log(xhr.status + ": " + xhr.responseText);
                                document.getElementById('output').innerHTML = "Request Failed.";
                            }
                    });
                    return false;  
            }); 

我不确定问题是否是模态在发布后没有消失,但如果是,你可以在成功/错误函数的末尾添加以下行:

$("#post_modal").modal('hide');

希望对有所帮助

干杯!