爲什麼bootstrap模態隱藏後形式submited？

我有下面的代碼，我使用bootstap模式（彈出對話框），當我點擊「添加」按鈕時，將提交表單，就像jquery代碼顯示。但我不知道爲什麼在表單提交後，模式會自動隱藏，如何控制這個以使表單提交後仍然存在？爲什麼bootstrap模態隱藏後形式submited？

$("#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>

來源

2014-08-29 Frank_Hsu

您是通過常規POST請求提交表單還是正在使用AJAX POST請求。它看起來像你正在做一個普通的POST請求，所以這會重新加載頁面看起來。 – Gohn67 2014-08-29 15:55:53

很可能你的頁面正在刷新，因爲你似乎沒有通過ajax提交。 – PeterKA 2014-08-29 15:56:19

您可能需要使用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 
    }); 
});

來源

2014-08-29 16:01:45 PeterKA

使用阿賈克斯（）異步發送您的文章，並避免刷新。

如果您的應用程序與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; 
    };

來源

2014-08-29 16:04:19 chishaku

爲什麼bootstrap模態隱藏後形式submited？

回答

相關問題