CODEWITHSUNDEEP
javascriptjqueryasp.netajaxasp.net-mvc
user7805240
user7805240

Reputation:

Close modal on AJAX Sucess(ASP.NET MVC)

I have Modal in view for making new record in Database.

View for it in Partial View

Here is code of view

<script src="~/Scripts/jquery-3.1.1.js"></script>

For AJAX I using this code

<script>
   $(document).ready(function () {
       $('#save_quest').click(function () {
        savequestion();
    });
});
    function savequestion() {
        $.ajax({
            type: 'Post',
            dataType: 'Json',
            data: {
                Question_new: $('#question').val(),
                Answer: $('#answer').val(),
                Preparing: $('#prepare').val(),
                Retries: $('#retries').val(),
                  },
            url: '@Url.Action("CreateNewQuestion", "Questions")',
            success: function (da) {
                if (da.Result === "Success") {
                    $('#myModal').modal('hide')
                    //window.location.href = da.RedirectUrl;

                } else {

                    alert('Error' + da.Message);
                }
            },
            error: function (da) {
                alert('Error');
            }
        });
    }

I need to hide modal when AJAX call is Successful

I try this $('#myModal').modal('hide')

Here is my modal on Primary View

<div class="modal fade" id="myModal" role="dialog" data-backdrop="false">
<div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            @Html.Partial("~/Views/Questions/CreateQuestion.cshtml")
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

</div>

How I can hide it on AJAX Success?

Upvotes: 1

Views: 2750

Answers (3)

Gauri Bhosle
Gauri Bhosle

Reputation: 5483

You can try any of the below option in your ajax success block. Hopefully it will solve your problem.

        $("#myModal").modal('hide');
    OR
        $('#myModal').modal('toggle');
    OR
        $('#myModal').removeClass('show');
    OR
        $('#myModal').modal().hide();
    OR
        $("#myModal .close").click();
    OR
        $("#myModal .close").trigger("click");

Upvotes: 3

Chintan Mstry
Chintan Mstry

Reputation: 31

This is not the proper way. $('#myModal').hide();

The proper way $("#myModal").modal('hide');

Have you try adding bootstrap.js in your page? if not please include it in your page and then test. It should work.

Upvotes: 0

user7805240
user7805240

Reputation:

I found solution

Just need to write

$('#myModal').hide();

Upvotes: 0

Related Questions