ajax modal 关闭,jquery - Modal won't close on ajax success - Stack Overflow

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(

$("

").append($("").text(data[i].name))

.append($("

").text(data[i].manufacturerItem.serialNumber)));

}

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

}

})

}

});

});

my html:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值