临时解决-bootstrap模态框发送ajax请求后自动关闭

这个问题困扰了我好久，仍然没解决。这里只记录一下我尝试过的解决方案。

问题描述

我有一个模态框，上面有一个表单，表单中很多input不提，还有两个按钮：按钮A是预测编号，点击后需要ajax发送post请求，异步获取一些数据，再回显到模态框的某个input中；

$("#predictSampleIdsButton").click(function(){
	var formData = new FormData();
	formData.append("order", $("#addOrUpdateForm").serialize());
	$.ajax({
		type: "post",
		url: "/tool/predict",
		data: formData,
		processData: false,
		contentType: false, 
		success: function (json) {
			// json是后台返回的字符串结果
			var ids = json.split(", ");
			for(i = 0; i < ids.length; i++){
				// 这个函数用来为表单下方的table增加一行，并设置某列的内容为指定值
				addSubOrderInfo(ids[i]);
			}
			document.getElementById("publicDescription").value = json;
			//$("#addOrUpdateModal").modal('show');
		},
		error: $.tool.ajaxError,
	});
});

按钮B是添加信息，点击后，模态框下部的table中会增加一行。

$("#addButton").click(function () {
    	if (this.name > 0 && index == 0) {
    		index = this.name;
    	}
    	index++;
    	$('#subOrdersTitles').removeClass('hide');
    	var $template = $('#subOrders'),
    		$clone = $template
    			.clone()
    			.removeClass('hide')
    			.removeAttr('id')
    			.attr('id', 'data-book-index'+index)
    			.insertBefore($template);
                // Update the name attributes
                $clone
                	.find('[name="rowIdx"]').attr('id', 'rowIdx.' + index).end()
                	.find('[name="suboid"]').attr('id', 'suboid.' + index).end()
                    .find('[name="statement"]').attr('id', 'statement.' + index).end()
					.find('[name="attach"]').attr('id', 'attach.'+index).end()
					.find('[name="removeRowButton"]').attr('pid', 'data-book-index'+index).end();
		
		document.getElementById('rowIdx.'+index).innerHTML = index;
}); 

整个模态框的结构为：

<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addroleLabel" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document" style="width:50%;">
        <div class="modal-content" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addroleLabel">添加订单</h4>
            </div>
            <div class="modal-body" >
                <form id="addOrUpdateForm" class="form-horizontal form-label-left" novalidate enctype="multipart/form-data" >
                    
                    <!-- 需要填写的表单内容已省略 -->
                  
                    <div class="item form-group">
                    	<label class="control-label col-md-3 col-sm-3 col-xs-12" for="publicDescription">描述：</label>
                    	<div class="col-md-6 col-sm-6 col-xs-12">
                    		<input type="text" class="form-control col-md-7 col-xs-12" name="publicDescription" id="publicDescription" />
                    	</div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12"></label>
                        <div class="col-md-6 col-sm-6 col-xs-12" >
                        	<button class="btn btn-default form-control" id="predictSampleIdsButton">预测编号</button>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12"></label>
                        <div class="col-md-6 col-sm-6 col-xs-12" >
                        	<button class="btn btn-default form-control" id="addButton">添加</i></button>
                        </div>
                    </div>
                    
                    <div id="suborderlist" style="padding-left:10%;padding-right:10%; ">
                    	<div >
                        	<table border="1" border-collapse="collapse">
                    			<thead>
                    				<tr class="form-group hide" id="subOrdersTitles">
                    					<th>No</th>
                    					<th>订单号</th>
                    					<th>分析内容</th>
                    					<th>附件</th>
                    					<th>操作</th>
                    				</tr>
                    			</thead>
                    			<tbody>
                    				<tr class="form-group hide" id="subOrders" name="subOrders">
                    					<td name="rowIdx"/>
                    					<td style="width:20%;">
                    						<input path="suboid" class="form-control" style="border-color:white; box-shadow:none;" name="suboid" required="required"/>
                    					</td>
                    					<td>
                    						<textarea path="statement" class="form-control" name="statement" style="border-color:white; box-shadow:none;" rows="2">
                            				</textarea>
                    					</td>
                    					<td style="width:20%;">
                    						<input name="attach" type="file" class="custom-file-input" id="customFile" lang="ch" style="border-color:white; box-shadow:none;">
                    					</td>
                    					<td style="width:5%;">
                    						<button type="button" class="btn btn-default" name="removeRowButton" onclick="deleteARow.call(this)" style="border-color:white; box-shadow:none;">
                            					<i class="fa fa-trash-o" aria-hidden="true"></i>
                            				</button>
                    					</td>
                    				</tr>
                    			</tbody>
                    		</table>
                        	
                    	</div>
                    </div>
                    <!--拆分订单列表 end -->
                </form>
            </div>
			
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary addOrUpdateBtn">提交</button>
            </div>
			
        </div>
    </div>
</div>

**现在的问题是：**当我先点击添加按钮，再填写内容并点击预测按钮后，模态框保持打开状态，“描述”处正常获取信息，每行也正确添加了信息；但当我不点击添加按钮，只填写内容并点击预测按钮后，模态框直接关闭。

失败的方案

1. 在模态框上添加属性

backdrop="static" data-keyboard="false"

这两个属性禁止了两种行为：a) 鼠标点击模态框外，关闭模态框 b) 按esc关闭模态框

2. 在ajax的success中加入 $(“#模态框id”).modal(‘show’);
   其实也不止这里加了，我也试着在ajax前加，但是，没变化。。还是之前的问题。

3. 先加一个空白行再删除
   其实是模拟我添加按钮的操作，结果也不行。。模态框还是自己关闭了。

4. 先加一个空白行再隐藏
   不行

5. 禁用添加按钮
   不行

现在只能先加一个空白行，就放着。这看起来很傻，不过我还没找到解决办法🚬

2023/3/24更新：可能的原因&临时解决方案

今天在探索代码时发现，添加空白行后模态框保持开启的原因是：空白行中的suboid域是必填的。因为是必填，所以空白行的这个为空时，模态框发现这里缺少信息，所以此时无法点击提交，也不会关闭模态框。

于是我试着去掉了 required=“required” ，结果无论是否添加空白行，模态框都会在点击预测按钮后自动关闭。

我又加回 required=“required”，但是令空白行的suboid为一个空格字符，结果同上。查询得知，空格字符是合法字符串，所以模态框认为信息完整，就自动关闭了。

现在的解决方案是先添加空白行，然后在这个空白行中填写预测出的第一个订单号。如果还有其他订单号，则继续添加一行并填充对应内容。