CODEWITHSUNDEEP
javascriptjquery
Dimmy Magalhães
Dimmy Magalhães

Reputation: 357

Bootstrap modal hide not working with jquery ajax

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?

Upvotes: 0

Views: 4307

Answers (5)

Niko
Niko

Reputation: 13

Hide processing does not occur, probably because the closing is done without performing the modal opening operation. This worked for me;

setTimeout(() => {$('#ModalExpeditionSeal').modal('hide')}, 350)

Upvotes: 0

Chimdesa
Chimdesa

Reputation: 1

you can use as the following:

$("#myid").modal().hide()

Upvotes: -1

Prajwal Bati
Prajwal Bati

Reputation: 195

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

Upvotes: 0

Antonio Santise
Antonio Santise

Reputation: 300

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

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

Upvotes: 3

Akrion
Akrion

Reputation: 18525

Can you try binding to the ajax events like this:

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

Upvotes: 1

Related Questions