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

陆沙

已于 2023-03-24 11:14:19 修改

阅读量734

点赞数

文章标签： ajax bootstrap javascript

于 2023-03-15 16:28:16 首次发布

本文链接：https://blog.csdn.net/pxy7896/article/details/129558516

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章描述了一个在网页模态框中使用AJAX进行异步数据交互的问题。用户点击“预测编号”按钮后能正常获取数据并更新模态框内容，但若未先点击“添加信息”按钮，模态框会在数据加载后关闭。问题源于必填字段的验证，当去除或绕过验证时，模态框不会关闭。目前的临时解决方案是先添加一个空白行并填充预测的订单号。

摘要由CSDN通过智能技术生成

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

问题描述

我有一个模态框，上面有一个表单，表单中很多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>