Почему bootstrap модальный скрыть после отправки формы?

Question

У меня есть код ниже, и я использую bootstap modal (диалог popout), и когда я нажимаю кнопку «Добавить», вы отправите форму, точно так же, как показывает код jquery. но я не знаю, почему после отправки формы модальный автоматически скроется, как контролировать это, чтобы сделать его еще там после отправки формы?

$("#personDialogAddPersonBtn").click(
      function(){ 
       $("#documentFile").attr("disabled", true); 
       $("#announcementForm").attr("action","${contextPath}/announcement/addAnnoPubToPerson.action"); 
       $("#announcementForm").submit(); 
      }  
     ); 


<div id="addPersonDialog"class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Add Person" aria-hidden="true"> 

... 

<div class="modal-footer"> 
    <a class="bt bt-pane b1" id="personDialogAddPersonBtn">Add</a> 
    <a class="bt" id="personDialogCloseBtn">Close</a> 
</div> 

Answer 1

Вы, возможно, придется использовать event.preventDefault(), и вы можете отправить форму через AJAX:

$("#announcementForm").submit(function(e){ 
    e.preventDefault() 
    $("#documentFile").attr("disabled", true); 
    $.post("${contextPath}/announcement/addAnnoPubToPerson.action", $(this).serialize()).done(function(data) { 
     //success 
    }) 
    .fail(function() { 
     //error 
    }); 
}); 

Answer 2

Используйте .ajax(), чтобы отправить POST асинхронно и избежать обновления.

Если ваше приложение хорошо работает с объектами JSON, вы можете сериализовать свою форму, создать объект json и отправить его в свое приложение.

$('#personDialogAddPersonBtn').click(function() {  

    data = $("#announcementForm").serializeObject(); 
    data = JSON.stringify(data); 

    $.ajax({ 
     url: '${contextPath}/announcement/addAnnoPubToPerson.action' 
     type: 'POST', 
     data: data, 
     contentType: 'application/json;charset=UTF-8', 
     cache:false, 
     success: function (response) { 
      alert('Form submitted') 
     }, 
     error: function(response){ 
      alert('Error submitting form) 
     } 
    }); 

}); 

$.fn.serializeObject = function() 
    { 
     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
      if (o[this.name] !== undefined) { 
       if (!o[this.name].push) { 
        o[this.name] = [o[this.name]]; 
       } 
       o[this.name].push(this.value || ''); 
      } else { 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    };