BootStrap Django Jquery Modal Not Closing on Ajax Call Submit

Question

I have modal that I use to display a popup and when you click the post button it makes an ajax function call, I also have it to be a modal toggle but it doesn't toggle the modal on submit and I don't know how to fix it.

div class

<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>

the ajax call

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

Answer 1

I'm not sure if the problem is that the modal doesn't disappear after posting, but if so - you can add to your success/error function the following line at the end:

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

Hope that's help

Cheers!