Modal won't close on ajax success

Question

I'm loading in the content of a modal with ajax. I have a button that submits the modal form and is suppose to close the modal when it's done processing the ajax submit so it can update a table at the bottom of the page. It's not closing the modal after I update the table and call $('modal-container').modal('hide');

This modal contains a table that has pagination on it. In the 'loaded.bs.modal' event I turn all the links that have the modal-pagination-link class into an ajax link. The pagination library I'm using only allows the url and parameters of the link to be passed in which is why I do this link transformation after they're loaded. When you click on one of these links it updates the table. In order to prevent the modal itself from closing after you click the link I call $(this).removeData('bs.modal');. What I've found is this $(this).removeData('bs.modal'); is what is preventing any of the $('#modal-container').modal('hide');'s from working.

How do I prevent the modal from closing when a link is clicked on in the modal and still allow .modal('hide') to still work? What can I call instead of $(this).removeData('bs.modal')?

$(function () {
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
    e.preventDefault();
    $(this).attr('data-target', '#modal-container');
    $(this).attr('data-toggle', 'modal');
    $('#modal-container').draggable();
    var updateTarget = $(this).attr('data-ajax-update');
    $('modal-update-target').attr('value', updateTarget);
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
    $('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
    $('modal-update-target').removeAttr("value");
});

$('#modal-container').on('click', '.modal-pagination-link', function (e) {
    var updateTarget = $(this).attr('data-ajax-update');
    $('modal-update-target').attr('value', updateTarget);
});

$('#modal-container').on('loaded.bs.modal', function () {
    $(this).removeData('bs.modal');
    $('modal-update-target').removeAttr("value");
    var pagcontainers = $(this).find('#modal-pagination');
    var hrefs = $(pagcontainers).find('a').addClass('modal-pagination-link')
                                            .attr('data-ajax', 'true')
                                            .attr('data-ajax-mode', 'replace')
                                            .attr('data-toggle', 'modal')
                                            .attr('data-target', '#modal-container')
                                            ;

});

$('#modal-container').on('submit', '#asset-modal-frm', function (e) {
    e.preventDefault();
    if (confirm("Are you sure?")) {
        var data = $(this).serializeArray();
        $.ajax({
            url: '/licenses/allocate',
            type: 'POST',
            data: data,

            success: function (data) {
                for (var i = 0; i < data.length ; i++) {
                    $('#allocatedLicenses tr:last').after(
                    $("<tr>").append($("<td>").text(data[i].name))
                                    .append($("<td>").text(data[i].manufacturerItem.serialNumber)));
                }
                $('#modal-container').modal('hide');
            }
        })
    }
});
});

my html:

    <div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
        <input id="modal-update-target" type="hidden"/>
        <div class="modal-dialog">
            <div class="modal-content center-block" style="display: table;">
            </div>
        </div>
    </div>

not sure but perhaps the `$(this).removeData('bs.modal');` you do in the `loaded.bs.modal` removes the built-in functionality of the model. so the `.modal` methods does nothing after that.. — Gabriele Petrioli, Jun 22 '15 at 17:35
Any particular reason for `$(this).removeData('bs.modal');`? — PeterKA, Jun 22 '15 at 17:38
@PeterKA I explained the reason for `$(this).removeData('bs.modal');` in my question. — Luminous, Jun 22 '15 at 17:59
See if this will be helpful: http://stackoverflow.com/questions/16152073/prevent-bootstrap-modal-from-disappearing-when-clicking-outside-or-pressing-esca — PeterKA, Jun 22 '15 at 18:38

score 3 · Accepted Answer · answered Jun 22 '15 at 17:29

3

You're using the wrong method to hide the element.

Change this:

$('#modal-container').modal('hide');

To this:

$('#modal-container').hide();

Or if you want to completely remove it from the page, change it to this:

$('#modal-container').remove();

answered Jun 22 '15 at 17:29

Elliot B.

17,060
10
80
101

That worked! Why is it every example I've seen is using `.modal('hide')`? – Luminous Jun 22 '15 at 18:03
Can you explain why the nice fade transition only works when you click outside the modal? `.hide();` closes it immediately with no transition which isn't exactly ideal. I'll still give ya the marked answer. – Luminous Jun 22 '15 at 18:26
I believe the prior examples you had seen were Bootstrap modals with their own specific functionality: http://getbootstrap.com/javascript – Elliot B. Jun 22 '15 at 18:37
1

jQuery `hide` allows you to specify a duration which creates the fade effect you're looking for: http://api.jquery.com/hide/ – Elliot B. Jun 22 '15 at 18:38

Modal won't close on ajax success

1 Answers1