解决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 相关文章推荐
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
Bootstrap精简教程
Nov 27 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
js一组验证函数
2008/12/20 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
企业治理工作自我评价
2013/09/26 职场文书
五好关工委申报材料
2014/05/31 职场文书
亮剑观后感500字
2015/06/05 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang