CODEWITHSUNDEEP
phpjquerymodal-dialogbootstrap-modal
Ankit
Ankit

Reputation: 657

Why buttons on Bootstrap Modal doesn't work second time?

I am facing a really silly issue that is annoying me too much.
I have a bootstrap modal popup which opens when I click on Add button from the page.

it works perfectly when I open it first time but when I close it and reopen (without refreshing the page) then the buttons on the modal like Save, Reset doesn't work.

I tried the below code. This closes the modal popup perfectly but buttons doesn't work.

jQuery('[data-dismiss="modal"]').on('click', function(){
    jQuery('.modal').hide();
    jQuery('.modal-backdrop').hide();
});

If I refresh the page and open the modal popup then it will work like a charm and if again I close and reopen then doesn't work.

So can somebody help me out from this situation.

Note :- I am not having any modal inside a modal. It's simply one popup that is causing issue.

I am using below code for save button.

$("#btnSave").die("click").bind("click", function() {
    //calling ajax to save
});

Upvotes: 5

Views: 6419

Answers (3)

Tom Regan
Tom Regan

Reputation: 3841

Years late here, but I was searching for a solution to a similar issue in bootstrap v5. I had created and stored a bootstrap modal div in a global javascript variable when the page loads; the "hide()" call worked fine the first time but failed on subsequent calls.

I'm doing this on dom content loaded:

document.addEventListener("DOMContentLoaded", function (event) {
    namespace.my_global_modal = new bootstrap.Modal(document.getElementById('loadingmodaldiv'),
    {
        keyboard: false,
        backdrop: "static"
    });
 });

And then opening and closing the modal as needed:

namespace.my_global_modal.show();

always worked. But

namespace.my_global_modal.hide();

only worked on the first call and failed on subsequent calls.

The solution was to remove the class "fade" from the modal markup. I changed this:

<div class="modal fade" tabindex="-1" id=loadingmodaldiv">

to this:

<div class="modal" tabindex="-1" id="loadingmodaldiv">

The "fade" class adds the visual effect of the modal fading out and in, so if that visual effect is important this solution obviously is of no use.

Upvotes: 0

Ankit
Ankit

Reputation: 657

After spending much time into code, I solved it by replacing hide with remove. 

jQuery('[data-dismiss="modal"]').on('click', function() {
     jQuery('.modal-backdrop').remove();
     jQuery('.modal').remove();
});

Now it is working fine. Thanks to all for giving attention to my issue and putting their suggestions and answers.

Upvotes: 0

Cerlin
Cerlin

Reputation: 6722

to close the modal you should use jQuery('.modal').modal('hide'); not jQuery('.modal').hide();

So your final code will look like

jQuery('[data-dismiss="modal"]').on('click', function(){
    jQuery('.modal').modal('hide');
});

Upvotes: 3

Related Questions