php - jQuery成功没有在codeigniter中显示结果
问题描述
我有一个显示折叠面板的控制器,如果我单击面板标题将其打开,它将显示来自 jquery 请求的表。但即使 jquere 请求成功,它也不会显示。
我的看法是这样的
<div id="view_kontrol" class="row" style="display: none;">
<div class="col-sm-12 col-md-12 col-lg-12 xs-mb-20">
<div class="accordion" id="accordionExample">
<div id="tampil" class="tampil">
</div>
</div>
</div>
</div>
控制器调用面板
public function view_kontrol_all(){
$data = $this->kontrol_model->getKec();
foreach ($data as $k) {
$desa = $this->kontrol_model->getDesaByKecId($k->kec_kode);
#onclick="viewAll($(this).data(\'target\'))"
echo ' <div class="card" id="'.$k->kec_id.'">
<a class="btn btn-link" onclick="viewAll(\''.$k->kec_kode.'\')" data-toggle="collapse" data-target="#'.$k->kec_kode.'" aria-expanded="true" aria-controls="collapse'.$k->kec_id.'">
<div class="card-header" id="heading'.$k->kec_id.'">
<h5 class="mb-0">
'.$k->kec_name.'
</h5>
</div>
</a>
<div id="'.$k->kec_kode.'" class="collapse" aria-labelledby="heading'.$k->kec_id.'" data-parent="#accordionExample">
<div class="card-body">
<div id="t'.$k->kec_kode.'" >
</div>
</div>
</div>
</div>';
}
}
显示表格的控制器
public function view_tabel(){
$k = $this->input->post('kode');
$desa = $this->kontrol_model->getDesaByKecId($k);
echo ' <table class="table table-bordered table-responsive table-responsive-sm ">
<thead>
<th>No</th>
<th>Desa</th>
<th>Terinput</th>
<th>Diproses Kecamatan</th>
<th>Diproses SKPD </th>
<th>Dapat Dipertimbangkan</th>
<th>Tidak Dapat Dipertimbangkan</th>
</thead>
<tbody>' ;
$i=1;
foreach ($desa as $d) {
$q = $this->kontrol_model->getUsulanKel($d->kel_kode);
$kec = $this->kontrol_model->prosKecByDes($d->kel_kode);
$s = $this->kontrol_model->prosOPDByDes($d->kel_kode);
$set = $this->kontrol_model->setujuByDes($d->kel_kode);
$tol = $this->kontrol_model->tolakByDes($d->kel_kode);
echo ' <tr>
<td>'.$i.'</td>
<td>'.$d->kel_name.'</td>
<td>'.$q->jumlah.'</td>
<td>'.$kec->jumlah.'</td>
<td>'.$s->jumlah.'</td>
<td class="usulan-setuju">'.$set->jumlah.'</td>
<td class="usulan-tolak">'.$tol->jumlah.'</td>
</tr>
';
$i++;
}
echo ' </tbody>
</table>';
}
这是ajax
function viewAll(d){
var dd = d.substring(1);
alert(d);
$.ajax({
url : baseUrl+"/kontrol/view_tabel",
type: "ajax",
method : "post",
data : "kode="+d,
beforeSend: function(){
$("#t"+d).html("<img src='"+baseUrl+"/assets/img/loading.gif'> ");
},
success: function(s){
alert('#t'+d);
$("#t"+d).html(s);
}
});
我有另一个控制器,它只显示 1 个面板,表 id 只是#table
,它可以工作,表在 jquery 请求后显示
解决方案
可能此代码将帮助您解决问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<script>
var baseUrl = 'http://localhost/answer/index.php';
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse"
data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body"></div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#headingOne').click(function () {
var d = 'test1';
$('.card-body').attr("id", "id_" + d);
$.ajax({
url: baseUrl + "/kontrol/view_tabel",
type: "ajax",
method: "post",
data: "kode=" + d,
success: function (s) {
$('#id_' + d).html(s);
}
});
});
});
</script>
</body>
</html>
这是我的控制器功能
public function view_tabel()
{
$kode = $this->input->post('kode');
echo '<table class="table table-bordered table-responsive table-responsive-sm ">
<thead>
<th>No</th>
<th>Desa</th>
<th>Terinput</th>
<th>Diproses Kecamatan</th>
<th>Diproses SKPD </th>
<th>Dapat Dipertimbangkan</th>
<th>Tidak Dapat Dipertimbangkan</th>
</thead>
<tbody>
<tr>
<td>'.$kode.'</td>
<td>'.$kode.'</td>
<td>'.$kode.'</td>
<td>'.$kode.'</td>
<td>'.$kode.'</td>
<td class="usulan-setuju">'.$kode.'</td>
<td class="usulan-tolak">'.$kode.'</td>
</tr>
</tbody>
</table>';
}
推荐阅读
- c++ - 错误:无法将类指针转换为有符号字符 *
- python - 统计 - 如何创建特定分布的数据样本
- email - 通过 adb shell 发送电子邮件时如何填写“收件人”字段?
- javascript - 在组件样式加载之前,在 React 头盔中加载我的样式文件
- c++ - 线程安全队列实现:pop() 的高效实现
- python - 如何在 Firebase Cloud Storage 上创建存储桶
- typescript - combineReducers 打字稿没有重载
- flutter - 在 Flutter 的底部工作表中集成 Google Pay
- c# - 为什么我在 .NET 中运行“Add-Migration InitialCreate”时遇到错误?
- java - Java 8 – DateTimeFormatter:格式化 Oracle 日期