解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法
問題背景
第一步進(jìn)行新增驗(yàn)證

第二步進(jìn)行修改模態(tài)框 驗(yàn)證信息沒有消除 且表單數(shù)據(jù)被緩存

模態(tài)框代碼:新增修改共用一個(gè)模態(tài)框
<!-- 模態(tài)框(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"> 標(biāo)題 </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" >關(guān)閉</button> <button type="button" class="btn btn-primary" onclick="save()">提交</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
js代碼
//驗(yàn)證設(shè)置
$(function(){
$("#form1").bootstrapValidator({
feedbackIcons: {
valid:"glyphicon glyphicon-ok",
invalid:"glyphicon glyphicon-remove",
validating:"glyphicon glyphicon-refresh"
},
fields : {
"unitName" : {
validators : {
notEmpty : {
message : '單位名稱不能為空'
}
}
}
}
});
});
//重置表單數(shù)據(jù)
$(function() {
$("#myModal").on('hide.bs.modal',function() {
//關(guān)閉后重置表單數(shù)據(jù)
$("#form1").data('bootstrapValidator').resetForm();
});
$("#myModal").on('show.bs.modal',function() {
//打開前重置表單數(shù)據(jù)
$("#form1").data('bootstrapValidator').resetForm();
});
});
function save() {
//保存前開啟驗(yàn)證
$("#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);
//關(guān)閉模態(tài)框
$('#myModal').modal('hide');
} else {
alert(result.message);
}
},
complete : function() {
},
error : function(data) {
alert("error");
}
});
}}
最終解決效果


以上這篇解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript表單驗(yàn)證要注意的事項(xiàng)
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。被 JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有:用戶是否已填寫表單中的必填項(xiàng)目?用戶輸入的郵件地址是否合法?用戶是否已輸入合法的日期?用戶是否在數(shù)據(jù)域 (numeric field) 中輸入了文本?2014-09-09
同一個(gè)網(wǎng)頁中實(shí)現(xiàn)多個(gè)JavaScript特效的方法
這篇文章主要介紹了同一個(gè)網(wǎng)頁中實(shí)現(xiàn)多個(gè)JavaScript特效的方法,實(shí)例分析了多個(gè)特效的實(shí)現(xiàn)原理與相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript給每一個(gè)li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript給每一個(gè)li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法,包括js循環(huán)給li綁定參數(shù)不同的點(diǎn)擊事件,需要的朋友可以參考下2016-12-12
javascript 偽數(shù)組實(shí)現(xiàn)方法
能通過Array.prototype.slice轉(zhuǎn)換為真正的數(shù)組的帶有l(wèi)ength屬性的對(duì)象。2010-10-10
詳細(xì)講解js實(shí)現(xiàn)電梯導(dǎo)航的實(shí)例
對(duì)于某一個(gè)頁面內(nèi)容繁多,如果我們滾動(dòng)的時(shí)間較長,為了增加用戶體驗(yàn),我們需要實(shí)現(xiàn)點(diǎn)擊某一個(gè)按鈕,然后滾動(dòng)到對(duì)應(yīng)的區(qū)域,滾動(dòng)的時(shí)候,右側(cè)對(duì)應(yīng)的分類實(shí)現(xiàn)高亮,所以本文給大家詳細(xì)介紹講解了js實(shí)現(xiàn)電梯導(dǎo)航,需要的朋友可以參考下2023-10-10
js對(duì)數(shù)組中的數(shù)字從小到大排序?qū)崿F(xiàn)代碼
對(duì)數(shù)組中的數(shù)字從小到大排序,很多時(shí)候需要用的多,需要的朋友可以參考下2012-09-09
javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作
這篇文章主要介紹了javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作,分別可以實(shí)現(xiàn)點(diǎn)擊之后排序和還原,和排升序和降序的功能,文章末尾附完整代碼,感興趣的小伙伴們可以參考一下2015-11-11
js遍歷詳解(forEach, map, for, for...in, for...of)
在本篇文章里小編給大家整理的是關(guān)于js中的各種遍歷(forEach, map, for, for...in, for...of)相關(guān)知識(shí)點(diǎn)用法總結(jié),需要的朋友們參考下。2019-08-08

