解决bootstrap模态框数据缓存的问题方法

 更新时间:2018年08月10日 15:43:38   作者:KingD0001  
今天小编就为大家分享一篇解决bootstrap模态框数据缓存的问题方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

问题背景

第一步进行新增验证

第二步进行修改模态框 验证信息没有消除 且表单数据被缓存

模态框代码:新增修改共用一个模态框

<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabel">
标题
</h4>
</div>
<div class="modal-body">
<form id="form1" class="form-horizontal" role="form">
<input type="hidden" id="unitId" name="unitId"/>
<div class="form-group">
<label class="control-label col-sm-2" for="">单位名称</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="unitName" name="unitName">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
<button type="button" class="btn btn-primary" onclick="save()">提交</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

js代码

//验证设置

$(function(){ 
$("#form1").bootstrapValidator({
feedbackIcons: {
 valid:"glyphicon glyphicon-ok",
 invalid:"glyphicon glyphicon-remove",
 validating:"glyphicon glyphicon-refresh"
 },
fields : { 
"unitName" : {

validators : {
notEmpty : {
message : '单位名称不能为空'
}
}
}
}
});
});

  //重置表单数据
$(function() { 
 $("#myModal").on('hide.bs.modal',function() {
 //关闭后重置表单数据
 $("#form1").data('bootstrapValidator').resetForm(); 


 });
 
 $("#myModal").on('show.bs.modal',function() {
 //打开前重置表单数据
 $("#form1").data('bootstrapValidator').resetForm(); 
 });
});
function save() {

  //保存前开启验证
$("#form1").bootstrapValidator("validate");
if($("#form1").data("bootstrapValidator").isValid()){
$.ajax({
url : "${path}/center/unit/save.action",
data : $('#form1').serialize(),
type : "post",
dataType : "json",
beforeSend : function() {
// loading show
},
success : function(result) {
if (result.success) {
search();
alert(result.message);

     //关闭模态框
$('#myModal').modal('hide');
} else {
alert(result.message);
}
},
complete : function() {
},
error : function(data) {
alert("error");
}
});
}}

最终解决效果

以上这篇解决bootstrap模态框数据缓存的问题方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Javascript表单验证要注意的事项

    Javascript表单验证要注意的事项

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有:用户是否已填写表单中的必填项目?用户输入的邮件地址是否合法?用户是否已输入合法的日期?用户是否在数据域 (numeric field) 中输入了文本?
    2014-09-09
  • 同一个网页中实现多个JavaScript特效的方法

    同一个网页中实现多个JavaScript特效的方法

    这篇文章主要介绍了同一个网页中实现多个JavaScript特效的方法,实例分析了多个特效的实现原理与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript给每一个li节点绑定点击事件的实现方法

    JavaScript给每一个li节点绑定点击事件的实现方法

    这篇文章主要介绍了JavaScript给每一个li节点绑定点击事件的实现方法,包括js循环给li绑定参数不同的点击事件,需要的朋友可以参考下
    2016-12-12
  • javascript 伪数组实现方法

    javascript 伪数组实现方法

    能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。
    2010-10-10
  • 详细讲解js实现电梯导航的实例

    详细讲解js实现电梯导航的实例

    对于某一个页面内容繁多,如果我们滚动的时间较长,为了增加用户体验,我们需要实现点击某一个按钮,然后滚动到对应的区域,滚动的时候,右侧对应的分类实现高亮,所以本文给大家详细介绍讲解了js实现电梯导航,需要的朋友可以参考下
    2023-10-10
  • 详细分析JavaScript中的深浅拷贝

    详细分析JavaScript中的深浅拷贝

    这篇文章主要介绍了JavaScript中的深浅拷贝,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • js对数组中的数字从小到大排序实现代码

    js对数组中的数字从小到大排序实现代码

    对数组中的数字从小到大排序,很多时候需要用的多,需要的朋友可以参考下
    2012-09-09
  • 学习使用Bootstrap页面排版样式

    学习使用Bootstrap页面排版样式

    这篇文章主要教大家学习使用Bootstrap页面排版样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • javascript实现对表格元素进行排序操作

    javascript实现对表格元素进行排序操作

    这篇文章主要介绍了javascript实现对表格元素进行排序操作,分别可以实现点击之后排序和还原,和排升序和降序的功能,文章末尾附完整代码,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js遍历详解(forEach, map, for, for...in, for...of)

    js遍历详解(forEach, map, for, for...in, for...of)

    在本篇文章里小编给大家整理的是关于js中的各种遍历(forEach, map, for, for...in, for...of)相关知识点用法总结,需要的朋友们参考下。
    2019-08-08

最新评论