Question

我有一个显示折叠面板的控制器，如果单击面板标题将其打开，它将显示来自jquery请求的表格。但是即使jquere请求成功，它也不会显示。 / p>

我的视图是这样的

<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);
    }
  });

我还有另一个控制器，它仅显示一个面板，并且表ID仅为#table，它起作用了，该表在jquery请求后显示。

Answer 1

可能是这段代码将帮助您解决问题。

<!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>';

    }

jQuery成功未在codeigniter中显示结果

1 个答案: