Bootstrap modal hide not working with jquery ajax

0
votes

I have a modal dialog made with bootstrap, like this:

<div class="modal fade" id="myid">
  <div class="modal-dialog">
    <div class="modal-content">
       Loading...
    </div>
  </div>
</div>

And I make a javascript function like this:

$(document)
            .ajaxStart(function () {
                $('#myid').modal('show');
            })
            .ajaxStop(function () {
                $('#myid').modal('hide');
            });

But when I call some ajax function the modal appears but no hide. I put console.log in both functions (ajaxStart and ajaxStop) and it was called. when I replace ajaxStop as below, everything works, but not appears right.

$(document)
                .ajaxStart(function () {
                    $('#myid').modal('show');
                })
                .ajaxStop(function () {
                    $('#myid').hide();
                    $('.fade').hide();
                });

The main problema is when I call another modal within ajax, then I click in link, loading ajax appears, request is send to server, response returns, modal with data from request appears, but loading modal not hide.

How can I fix it?

3
javascriptjquery

3 Answers

2
votes

You have to set a timeout. That works for me:

setTimeout(function () { $("#myid").modal("hide"); }, 500);
1
votes

Can you try binding to the ajax events like this:

$("#myid").bind({
   ajaxStart: function() { $(this).show(); },
   ajaxStop: function() { $(this).hide(); }
});
0
votes

Instead of using $('#myid').hide(); in ajaxStop, use $('#myid').modal('hide');