为什么在提交表单后引导模式隐藏？答案

【问题标题】：why bootstrap modal hide after form submited?为什么在提交表单后引导模式隐藏？
【发布时间】：2014-08-29 15:48:55
【问题描述】：

我有以下代码，我正在使用引导模式（一个弹出对话框），当我单击“添加”按钮时，将提交表单，就像显示的 jquery 代码一样。但是不知道为什么表单提交后，modal会自动隐藏，如何控制让它在表单提交后仍然存在？

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

【问题讨论】：

您是通过常规 POST 请求提交表单还是使用 AJAX POST 请求。看起来您正在执行常规 POST 请求，因此会重新加载看起来的页面。
很可能您的页面正在刷新，因为您似乎没有通过 ajax 提交。

标签： jquery twitter-bootstrap

【解决方案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
    });
});

【讨论】：

【解决方案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;
    };

【讨论】：