bootstrap的缓存怎么处理


本文摘自PHP中文网,作者爱喝马黛茶的安东尼,侵删。

第一步进行新增验证

1563004441(1).png

第二步进行修改模态框 验证信息没有消除 且表单数据被缓存

1563004463(1).png

相关推荐:《bootstrap入门教程》

模态框代码:新增修改共用一个模态框

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!-- 模态框(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代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

//验证设置

  

$(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");

}

});

}}

最终解决效果

1563004495(1).png

1563004517(1).png

以上就是bootstrap的缓存怎么处理的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

bootstrap table实现定时刷新数据的方法

浅谈bootstrap3中的下拉菜单事件

vue项目中引入bootstrap的方法

bootstrap拖动布局元素怎么做

怎样在html网页中使用bootstrap框架

bootstrap字体图标怎么引用

bootstrap input样式修改的方法

bootstrap怎么设置进度条

用npm下载bootstrap后怎么引入

bootstrap 怎么隐藏元素

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...