Как обнаружить увольнение модального диалога bootstrap в javascript?

Question

Я пытаюсь работать с модальным диалогом бутстрапов. События, которые я использую, - hidden и show. У меня нет проблем с использованием события show. Я не понимаю, как использовать событие hidden, с другой стороны. Я показываю форму в модальном диалоговом окне и в событии submit формы, я скрываю модальный диалог с $('.modal').modal('hide'). Это событие hide также запускается, когда модаль отклоняется либо с помощью значка закрытия, нажатием кнопки прерывания, которая имеет эту разметку <button type="button" class="btn btn-default" data-dismiss="modal">Abort</button>, нажав клавишу эвакуации или щелкнув где-то на .modal-backdrop. Как я могу отличить успешное представление формы от увольнения диалога?

Answer 1

Я решил эту проблему в несколько Hacky образом: Когда форма отправлена, я изменить значение атрибута пользовательских данных элемента, который не является частью формы. Когда происходит событие hidden, я сравниваю значения атрибута пользовательских данных с текущим значением входного элемента в форме, отображаемой в модальном режиме. Если эти два значения отличаются, модаль был уволен, иначе он был отправлен.

$('#modalWithForm').on('submit', 'form', function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: $(this).attr('action'), 
     method: 'POST', 
     data: { 
      param: parseInt($('#input').val(), 10), 
     } 
    }).done(function () { 
     $('label[data-custom]').data('custom', $('#input').val()); 
     $('#modalWithForm').modal('hide'); 
    }); 
}); 

$('#modalWithForm').on('hidden.bs.modal', function() { 
    var modalDismissed = parseInt($('#input').val(), 10) !== parseInt($('label[data-custom]').data('custom')); 
    $.ajax({ 
     url: '/Update', 
     method: 'POST', 
     dataType: "text", 
     data: { 
      param: parseInt(modalDismissed ? $('label[data-custom]').data('custom') : $('#input').val(), 10) 
     } 
    }).done(function (updatedForm) { 
     $('form').empty().html(updatedForm); 
    }); 
}); 

Answer 2

С Bootstrap 3:

$('#yourModal').on('hidden.bs.modal', function() { 
    // code here 
});