Как реализовать открытие модального окна с Bootstrap, дождавшись перед этим его закрытия?

Question

[DGretOu]

Есть модальное окно, которое открывается в результате Ajax запроса. В модальном окне предоставлен выбор компонентов и 2 кнопки, после чего модальное окно закрывается, отправляется еще Ajax запрос и то же модальное окно открывается опять.

Проблема в том, что когда я его повторно пытаюсь его открыть оно не успевает еще закрыться с прошлого раза и в итоге не отображается. Как это можно решить? Как можно дожидаться полного закрытия окна и потом отправлять новый запрос или отправлять запрос и при попытке открыть проверять/ожидать закрытия, чтобы открыть.

$('.button-without-component-send').on('click', function () {
			modalComponents.modal('hide');
			sendComponents();
		});

		$('.button-component-send').on('click', function () {
			modalComponents.modal('hide');
			currentPackage += 1;
			sendComponents('Название');
		});

		function sendComponents(name = '') {
			$.ajax({
			........
			modalComponents.modal('show');
			})

Answer 1

[YavaDev]

Не ленитесь и читайте документацию:
англ - https://getbootstrap.com/docs/4.5/components/modal...
рус - https://bootstrap-4.ru/docs/4.5/components/modal/#...

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Comments

[DGretOu]

Читал, пробовал такой вариант, например:

$('.button-component-send').on('click', function () {
			modalComponents.modal('hide');
			mmodalComponents.on('hidden.bs.modal', function () {
				currentPackage += 1;
				sendComponents('Название');
			}
		})

Но тогда потом получается шляпа с вызовами и обработкой события.

Так же пробовал с .data('bs.modal').isShown, но тоже не получилось.

Буду благодарен за помощь или совет

[YavaDev]

DGretOu, "hidden.bs.modal" - это событие, как и "click" например. А значит при клике на кнопку вы каждый раз создаете новый обработчик события. Скоре всего из-за этого и проблемы. Потому надо вынести обработчик события "hidden.bs.modal" из обработчика события "click".

$('.button-component-send').on('click', function () {
  modalComponents.modal('hide');
})
mmodalComponents.on('hidden.bs.modal', function () {
  currentPackage += 1;
  sendComponents('Название');
}

[DGretOu]

YavaDev, а как быть с кнопками,? Их ведь 2 и действия отличаются немного. Записывать в какую-то флаг-переменную и в событии модального окна условие?

[YavaDev]

DGretOu, да, можно и флаг.
Еще как вариант можно создать переменную в которой будет храниться то, что надо передать в функцию "sendComponents()" и при клике на кнопки перезаписывать её.

let argument = '';
$('.button-component-send').on('click', function () {
  modalComponents.modal('hide');
  argument = 'Название';
})
mmodalComponents.on('hidden.bs.modal', function () {
  currentPackage += 1;
  sendComponents(argument);
}