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

第二步進(jìn)行修改模態(tài)框 驗(yàn)證信息沒(méi)有消除 且表單數(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() {
//打開(kāi)前重置表單數(shù)據(jù)
$("#form1").data('bootstrapValidator').resetForm();
});
});
function save() {
//保存前開(kāi)啟驗(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ù)緩存的問(wèn)題方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
判斷JavaScript對(duì)象是否可用的最正確方法分析
在調(diào)試JavaScript的過(guò)程中,你是不是經(jīng)常會(huì)遇到object undefined的問(wèn)題呢?你平時(shí)是怎樣來(lái)測(cè)試對(duì)象是否存在呢?判斷瀏覽器版本?判斷JavaScript版本?本文來(lái)告訴你正確的方法。這篇文章涉及的瀏覽器可能古老一些,但是闡述的道理確實(shí)適合現(xiàn)在使用的。2008-10-10
JavaScript中的Error錯(cuò)誤對(duì)象與自定義錯(cuò)誤類型詳解
Error是JavaScript中最原始的錯(cuò)誤對(duì)象,作為各種異常的基礎(chǔ)對(duì)象,還有多個(gè)衍生的具體的錯(cuò)誤類型,這些錯(cuò)誤對(duì)象類型在nodejs中也可應(yīng)用,這篇文章主要介紹了JavaScript中的Error錯(cuò)誤對(duì)象與自定義錯(cuò)誤類型,需要的朋友可以參考下2022-12-12
JavaScript模擬實(shí)現(xiàn)自由落體效果
這篇文章主要為大家詳細(xì)介紹了JavaScript模擬實(shí)現(xiàn)自由落體效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08
JS基于Mootools實(shí)現(xiàn)的個(gè)性菜單效果代碼
這篇文章主要介紹了JS基于Mootools實(shí)現(xiàn)的個(gè)性菜單效果代碼,涉及JavaScript頁(yè)面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
JS 實(shí)現(xiàn)緩存算法的示例(FIFO/LRU)
這篇文章主要介紹了JS 實(shí)現(xiàn)緩存算法的示例(FIFO/LRU),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09
JavaScript+Canvas實(shí)現(xiàn)酷炫的粒子和流星效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript和Canvas實(shí)現(xiàn)酷炫的粒子和流星動(dòng)畫效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-01-01
layui實(shí)現(xiàn)數(shù)據(jù)表格table分頁(yè)功能(ajax異步)
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)數(shù)據(jù)表格table分頁(yè)功能、異步加載,表格渲染,含條件查詢,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07

