Heim > Web-Frontend > Bootstrap-Tutorial > Umgang mit dem Bootstrap-Cache

Umgang mit dem Bootstrap-Cache

爱喝马黛茶的安东尼
Freigeben: 2019-07-23 13:40:26
Original
2392 Leute haben es durchsucht

Umgang mit dem Bootstrap-Cache

Der erste Schritt besteht darin, eine neue Überprüfung hinzuzufügen

Umgang mit dem Bootstrap-Cache

Der zweite Schritt besteht darin, das modale Feld zu ändern, um die Informationen zu überprüfen wird nicht entfernt und die Formulardaten werden im Cache gespeichert

Umgang mit dem Bootstrap-Cache

Verwandte Empfehlungen: „Bootstrap Getting Started Tutorial

Modal-Box-Code: Neu Änderungen teilen sich eine modale Box

<!-- 模态框(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>
Nach dem Login kopieren

js-Code

//验证设置
 
$(function(){
$("#form1").bootstrapValidator({
feedbackIcons: {
 valid:"glyphicon glyphicon-ok",
 invalid:"glyphicon glyphicon-remove",
 validating:"glyphicon glyphicon-refresh"
 },
fields : {
"unitName" : {
 
validators : {
notEmpty : {
message : &#39;单位名称不能为空&#39;
}
}
}
}
});
});
 
  //重置表单数据
$(function() {
 $("#myModal").on(&#39;hide.bs.modal&#39;,function() {
 //关闭后重置表单数据
 $("#form1").data(&#39;bootstrapValidator&#39;).resetForm();
 
 
 });
  
 $("#myModal").on(&#39;show.bs.modal&#39;,function() {
 //打开前重置表单数据
 $("#form1").data(&#39;bootstrapValidator&#39;).resetForm();
 });
});
function save() {
 
  //保存前开启验证
$("#form1").bootstrapValidator("validate");
if($("#form1").data("bootstrapValidator").isValid()){
$.ajax({
url : "${path}/center/unit/save.action",
data : $(&#39;#form1&#39;).serialize(),
type : "post",
dataType : "json",
beforeSend : function() {
// loading show
},
success : function(result) {
if (result.success) {
search();
alert(result.message);
 
     //关闭模态框
$(&#39;#myModal&#39;).modal(&#39;hide&#39;);
} else {
alert(result.message);
}
},
complete : function() {
},
error : function(data) {
alert("error");
}
});
}}
Nach dem Login kopieren

Endlösungseffekt

Umgang mit dem Bootstrap-Cache

Umgang mit dem Bootstrap-Cache

Das obige ist der detaillierte Inhalt vonUmgang mit dem Bootstrap-Cache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage