繁体   English   中英

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

[英]BootStrap Django Jquery Modal Not Closing on Ajax Call Submit

我有用于显示弹出窗口的模式,当您单击发布按钮时,它会调用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>

阿贾克斯电话

            $("#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');

希望有帮助

干杯!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM