我有一个表,用它来显示数据库中的信息。我在它下面有编辑按钮来编辑表格中的数据,并调用模态弹出框来编辑数据。问题是当我单击按钮并编辑某些数据时,模式弹出框不会显示,然后将其保存到数据库,仅加载表格,再次单击按钮编辑进行编辑。为什么模态弹出框不会显示?我的代码中是否有重叠功能?任何帮助都是合情合理的。
这是我的代码
<button class="btn-success" id="btn-edit" data-toggle="modal" data-backdrop="static" data-target="#edit" style="float: right; padding: 5px 10px 5px 10px;">Edit</button>
<div class="modal fade" id="edit" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background: #4787ef">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="center">Edit</h4>
</div>
<div class="modal-body">
<form id="form2">
<div class="form-group">
<label for="inputSkills">Lain-lain</label>
<input type="text" class="form-control" id="lainnya" name="lainnya" >
</div>
<button type="button" class="btn btn-info" data-dismiss="modal" style="float: left;">Kembali</button>
<button type="button" id="btn-simpan-data" class="btn btn-default">Simpan</button>
</div>
</div>
</div>
</div>
AJAX
$('#btn-simpan-data').click(function(e){
$.ajax({
type: "POST",
url: "<?php echo base_url('c_dokter/update_data_odon');?>",
data: $('#form2').serialize(),
dataType:'json',
success:function(data){
if (data.status) {
alert('sukses!');
$('#edit').modal('hide');
$('.modal-backdrop').remove();
loadTable();
}
},
error:function(){
alert('error ... ');
}
});
});
function loadTable(){
$.ajax({
type: "GET",
url: "<?php echo base_url('c_dokter/get_data_odon/');?>"+id_pasien,
dataType:'json',
success:function(data){
console.log(data.data);
//set tabel data
$('#occlusi').html(data.data[0].occlusi);
$('#torus_palatinus').html(data.data[0].torus_palatinus);
$('#torus_mandibularis').html(data.data[0].torus_mandibularis);
$('#palatum').html(data.data[0].palatum);
$('#diastema').html(data.data[0].diastema);
$('#gigi_anomali').html(data.data[0].gigi_anomali);
$('#lainnya').html(data.data[0].lainnya);
$('#ket1').html(data.data[0].ket1);
$('#ket2').html(data.data[0].ket2);
$('#decay').html(data.data[0].decay);
$('#missing').html(data.data[0].missing);
$('#fill').html(data.data[0].fill);
},
error:function(){
alert('error ... ');
}
});
}