简体   繁体   中英

Bootstrap modal open button requires two clicks to reopen after closing

I'm firing a modal via a button with data attributes . The button sits in a row on a datatable . The modal is used to update an entity in the database. Here's the code that opens the modal:

<button 
    data-toggle="modal" 
    data-target="#updateInstitutionModal" 
    data-id="' + data.id + '" 
    data-name="' + data.name + '" 
    data-requires_id="' + data.requires_id + '"
    class="btn btn-xs btn-primary bootstrap-modal-form-open"
>
    <i class="glyphicon glyphicon-edit"></i> Edit
</button>

I'm using this https://github.com/JesseLeite/Laravel-Bootstrap-Modal-Form extension to handle the form in the modal that deals with ajax request to my backend which is PHP/Laravel. I have modified it slightly to do the following once the form has submitted with no errors returned:

function reload() {
    // remove the modal
    $('#updateInstitutionModal').hide();
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
    // refresh my datatable
    $('#institutions-table').DataTable().ajax.reload();
    return true;
}

Originally it just did the following: location.reload(); whereas I'm calling my own reload method.

The problem is that if I click the update button and perform an update everything works fine, but if I immediately click the button in order to update x or another update button in any other row the modal does not show up. After pressing the button again a second time the modal will then show. Any ideas on what I'm doing wrong here?

Replaced:

function reload() {
    // remove the modal
    $('#updateInstitutionModal').hide();
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();

    // ...
}

with:

function reload() {
    // toggle the modal
    $('#updateInstitutionModal').modal('toggle');

    // ...
}

And now it's working. I should have been toggling the modal instead of closing it. So the button was still reading it as open I believe, that's why it took two clicks. Problem solved!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM