Codeigniter ajax 状态码显示 200 但显示错误信息

Question

Just try to make it simple.

I'm trying to show data in my data table when I click a dropdown value

I'm using ajax to get the data from my controller

everything works fine except the results isn't showing in my view even the status code shows 200 ok

here's my Model

function tampil_renja(){
        $this->db->distinct();
        $this->db->select
            (
                'lkp_program.progskpd_id AS prog_id, 
                CONCAT(msr_mstrurusan.uru_kode, '.', lkp_program.progskpd_kode) AS prog_kode,
                lkp_program.progskpd_prog_uraian as prog_uraian');
        $this->db->from('msr_mstrurusan');
        $this->db->join('lkp_program', 'msr_mstrurusan.uru_id = lkp_program.progskpd_ursid');
        $this->db->join('lkp_kegiatan', 'lkp_program.progskpd_id = lkp_kegiatan.kegskpd_prog_id');
        $this->db->join('mnv_keg_renja', 'lkp_kegiatan.kegskpd_id = mnv_keg_renja.tar_keg_id');
        $this->db->where('mnv_keg_renja.tar_keg_id is NOT NULL', NULL, FALSE);
        $this->db->order_by("lkp_program.progskpd_id", "asc");
        return $this->db->get();    
    }

here's my ajax code within the view

<div class="container-fluid">
                <header>
                    <h3 class="mb-2">Renja</h3>
                </header>
                <div class="card-body">
                  <div class="table-responsive" style="margin-bottom: 1px;">
                        <?php 
                            if (count($skpd) > 0) { 
                        ?>

                              <label class="col-sm-1 control-label">OPD</label>
                                <div class="col-sm-5">
                                    <select id="skpd" name="skpd" class="form-control input-sm">
                                        <option value="0">-- Pilih Perangkat Daerah--</option> 
                                        <?php
                                        foreach ($skpd as $pd) {
                                            echo "<option value='" . $pd->uk_kowil . "#" . $pd->uk_id . "'>" . strtoupper($pd->uk_nama) . "</option>";
                                        }
                                        ?>
                                    </select>
                                </div>

                        <?php 
                            } 
                            else { 
                        ?>
                            <input type='hidden' name='skpd' id='skpd' value='<?php 
                            ?>' />
                        <?php 
                            } 
                        ?>

                        <div id="listskpd" class="col-sm-1">
                            <i id="rldspin" style="margin-top:5px"></i>
                        </div>
                        <div id="jml_angg" class="text-right" style="padding-top: 8px;font-size: 13px;margin-right: 15px;">

                        </div>
                    </div>
                    <table id="list_target" class="table table-striped table-bordered table-hover" width="100%">
                        <thead>
                            <tr>
                                <th rowspan="3" class="text-center text-middle" style="width:1%;">No</th>
                                <th rowspan="3" class="text-center text-middle" style="width:4%;">Kode Rekening</th>
                                <th rowspan="3" class="text-center text-middle" style="width:27%;">Program/Kegiatan</th>
                                <th rowspan="3" class="text-center text-middle" style="width:20%;">Indikator Kinerja program (outcome)/ kegiatan (output) </th>
                                <th colspan="7" class="text-center text-middle" style="width:30%;">Target Renja [berdasarkan DPA] SKPD pada Tahun</th>
                            </tr>
                            <tr>
                                <th rowspan="2" class="text-center text-middle" style=""> Satuan</th>
                                <th colspan="2" class="text-center text-middle" style="">Target Triwulan 1</th>
                                <th colspan="2" class="text-center text-middle" style="">Target Triwulan 2</th>
                                <th colspan="2" class="text-center text-middle" style="">Target Triwulan 3</th>
                                <th colspan="2" class="text-center text-middle" style="">Target Triwulan 4</th>
                                <th rowspan="2" class="text-center text-middle" style="">Target Anggaran</th>
                            </tr>
                            <tr>
                                <th class="text-center text-middle" style="">Kin</th>
                                <th class="text-center text-middle" style="">Keu</th>
                                <th class="text-center text-middle" style="">Kin</th>
                                <th class="text-center text-middle" style="">Keu</th>
                                <th class="text-center text-middle" style="">Kin</th>
                                <th class="text-center text-middle" style="">Keu</th>
                                <th class="text-center text-middle" style="">Kin</th>
                                <th class="text-center text-middle" style="">Keu</th>
                            </tr>
                        </thead>
                        <tbody id="datatarget">
                        </tbody>
                    </table>
                </div>
            </div>
        </article>
<script type="text/javascript" language="javascript" src="<?php echo base_url().'assets/vendor/jquery/jquery.js'?>"></script>
<script type="text/javascript" language="javascript" src="<?php echo base_url().'assets/vendor/datatables/jquery.dataTables.js'?>"></script>
<script type="text/javascript">
    $(document).ready(function(){


        $('#skpd').change(function(){ 
                var arrval = $(this).val().split("#");
                var kowil = arrval[0];
                var idpd = arrval[1];
                if(idpd != 0){;
                    tampil_data_renja(kowil, idpd);
                } else {
                    $('#datatarget').DataTable.Destroy();
                    $('#datatarget').DataTable.Draw();
                    $('#datatarget').DataTable.Destroy();
                }
            }); 

        function tampil_data_renja(kowil, idpd){
            $.ajax({
                type  : 'ajax',
                url   : '<?php echo base_url()?>renja/tampil_renja/',
                async : false,
                dataType : 'json',
                success : function(data){
                    var html = '';
                    var i;
                    alert(data.length);
                    for(i=0; i<data.length; i++){
                        html += '<tr>'+
                                '<td>'+(i+1).toString()+'</td>'+
                                '<td>'+data[i].prog_kode+'</td>'+
                                '<td>'+data[i].prog_uraian+'</td>'+
                                '</tr>';
                    }
                    $('#datatarget').html(html);
                },
                error: function(){
                    alert('Could not load the data');
                }

            });
        }

and this is the controller

function tampil_renja(){
        echo json_encode( $this->m_data->tampil_renja()->result() );
    }

JSON result in the network tab of chrome dev tools

[{"prog_id":"1","prog_kode":"6.01.0118","prog_uraian":"Program Koordinasi, pembinaan dan penyelenggaraan pemerintahan, ketentraman dan ketertiban umum, perekonomian, kesejahteraan sosial dan pembangunan"},{"prog_id":"2","prog_kode":"6.01.0118","prog_uraian":"Program Koordinasi, pembinaan dan penyelenggaraan pemerintahan, ketentraman dan ketertiban umum, perekonomian, kesejahteraan sosial dan pembangunan"}]

any help and guide would be appreciated sorry for my bad english by the way

Answer 1

Please try the following code: Changes made are:

1. commented datatype in the AJAX

2. parse response of success function as JSON.

    $.ajax({ type: 'get', // edit 1 url: '<?php echo base_url()?>renja/tampil_renja/', async: false, //dataType: 'json', //change over here success: function(data){ data = JSON.parse(data); //change over here var html = ''; var i; alert(data.length); for(i=0; i<data.length; i++){ html += '<tr>'+ '<td>'+(i+1).toString()+'</td>'+ // '<td>'+data[i].prog_id+'</td>'+ '<td>'+data[i].prog_kode+'</td>'+ '<td>'+data[i].prog_uraian+'</td>'+ '</tr>'; } $('#datatarget').html(html); }, error: function(){ alert('Could not load the data'); } })

Answer 2

You have to redraw the datatable after the element is updated on ajax call success:

        //fungsi tampil barang
        function tampil_data_renja(kowil, idpd){
            // var requrl = '<?php echo base_url()?>renja/tampil_renja/'+kowil+'/'+idpd;
            $.ajax({
                type  : 'ajax',
                // url   : '<?php echo base_url()?>renja/tampil_renja/'+kowil+'/'+idpd,
                url   : '<?php echo base_url()?>renja/tampil_renja/',
                async : false,
                dataType : 'json',
                success : function(data){
                    var html = '';
                    var i;
                    // console.log(data.length);
                    alert(data.length);
                    for(i=0; i<data.length; i++){
                        html += '<tr>'+
                                '<td>'+(i+1).toString()+'</td>'+
                                // '<td>'+data[i].prog_id+'</td>'+
                                '<td>'+data[i].prog_kode+'</td>'+
                                '<td>'+data[i].prog_uraian+'</td>'+
                                '</tr>';
                    }
                    $('#datatarget').html(html);
                    $('#list_target').DataTable.Draw(); // redraw the datatable
                },
                error: function(){
                    alert('Could not load the data');
                }

            });
            // return alert(kowil);
        }