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


Posted in Javascript onAugust 10, 2018

问题背景

第一步进行新增验证

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

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

解决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">
×
</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模态框数据缓存的问题方法

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

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

Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
javascript常用函数(2)
Nov 05 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
浅谈Vue 数据响应式原理
May 07 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 #Javascript
微信小程序滑动选择器的实现代码
Aug 10 #Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 #Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 #Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 #Javascript
Vue全局分页组件的实现代码
Aug 10 #Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 #Javascript
You might like
漂亮但不安全的CTB
2006/10/09 PHP
PHP的5个安全措施小结
2012/07/17 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
Python面试题集
2012/03/08 面试题
会计专业导师推荐信
2014/03/08 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年仓库工作总结
2014/11/20 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏