解决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 相关文章推荐
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
微信小程序 教程之模板
Oct 18 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python3音乐播放器简单实现代码
2020/04/20 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python延时操作实现方法示例
2018/08/14 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
python中如何进行连乘计算
2020/05/28 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
金融事务专业毕业生求职信
2014/02/23 职场文书
教师教学评估方案
2014/05/09 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis