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