CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmodal-dialog
Austin
Austin

Reputation: 3080

Modal will not fade away after calling .modal('hide')

First time working with modal's and my fade is not working correctly, it will disappear upon cancelling, but will not disappear after confirming a delete.

Here is my modal w/ button

<span class="item-delete-button">
       <button class="btn btn-danger col-lg-3 col-lg-offset-3" data-toggle="modal" data-target="#@item.ID" onclick="deleteStart(this)">
            <span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete
        </button>
            </span>

  <!-- Modal -->
  <div class="modal fade" id="@item.ID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
           <div class="modal-content">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h4 class="modal-title" id="myModalLabel">Delete</h4>
                 </div>
                 <div class="modal-body">
                      <span style="font-size: 20px">Are you sure you want to delete Employee: @Html.DisplayFor(modelItem => item.Name)?</span>
                 </div>
                 <div class="modal-footer">
                      <button type="button" onclick="deleteStopped(this)" class="btn btn-default" data-dismiss="modal">Cancel</button>
                      <button type="button" onclick="deleteFunction(this)" class="btn btn-danger">Confirm Delete</button>
                </div>
           </div>
       </div>
  </div>

Here is all my JQuery

function deleteStart(element) {
        $(element).closest("table").toggleClass("table-hover");
        $(element).closest("tr").css('background-color', 'red');
    }

    function deleteStopped(element) {
        $(element).closest("table").toggleClass("table-hover");
        $(element).closest("tr").css('background-color', 'initial');
    }

    function deleteFunction(element) {
        var newID = $(element).closest("td").find("span.ID").text();

                $.post(
            '@Url.Action("customDelete", "Employee")',
            {
                'id': newID
            },
            function (data) { },
            "json"
            );
                $(element).closest("tr").next("tr").remove();
                $(element).closest("tr").remove();             

                $(element).closest("table").toggleClass("table-hover");
                $(element).closest("tr").css('background-color', 'initial');
                $('.modal').modal('hide');     
    }

Any help appreciated!

EDIT: I tried adding $('.modal').modal('hide'); but that does not seem to be helping, am I reference it incorrectly?

Upvotes: 0

Views: 840

Answers (2)

Austin
Austin

Reputation: 3080

Issue found!

If you try to hide the modal within a function that temporarily leaves the View (such as AJAX) then you must end your modal's scripts before then or else they get lost in the application, and thus you cannot hide it.

To do this you must immediately call the following within your function before any other functions/methods are called such an AJAX Post in my situation.

This gets rid of the fade and then hides it.

$('#myModal').removeClass('fade');
$('#myModal').modal('hide');

Upvotes: 1

Rene Padillo
Rene Padillo

Reputation: 2358

It seems you didn't hide your modal after performing the delete.

At the bottom part of your deleteFunction() add a $('.modal').modal('hide'); this will close your modal manually.

See http://getbootstrap.com/javascript/#modals

Upvotes: 0

Related Questions