Codeigniter：AJAX调用后返回JSON数据，但无法成功运行：function（）

Question

My Ajax

 // Load category function function load_category() { $.ajax({ url: "<?php echo base_url() ?>index.php/admin/departments", type: "GET", dataType: 'json', success: function(data){ $('#category-row').html(data); }, error: function(){ alert('Error....'); } }); } // Fix tooltip not work $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); }); 

My table

This where I want to echo that data...

 <div class="row"> <div class="col-sm-12"> <div class="card-box table-responsive"> <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> <thead> <tr> <th>Dep't Name</th> <th>Description</th> <th>Consultancy Amount</th> <th>Doctor's Amount</th> <th>Manage Department</th> </tr> </thead> <tbody id="category-row"> </tbody> </table> </div> </div><!-- end col --> </div> <!-- end row --> 

My Contoller now

admin/departments

 public function departments()
{

    $table ='';

    $departments = $this->admin_model->departments();

    if(count($departments)>0)
    {
      foreach ($departments as $dept)
      {
        $table.='<tr id="row-id-'.$dept->Dept_id.'">';
        $table.='<td>'.$dept->Dept_name.'</td>';
        $table.='<td>'.$dept->Description.'</td>';
        $table.='<td>'.$dept->Consultancy_amount.'</td>';
        $table.='<td>'.$dept->Doctor_Percentage.'</td>';
        $table.='<td>';
        $table.='<a href="#" data-toggle="modal" data-target="#myModalUpdate"><i class="glyphicon glyphicon-edit" data-toggle="tooltip" title="EDIT DEPARTMENT"></i></a> |';
        $table.='<a href="#" data-toggle="modal" data-target="#myModalDelete"><i class="glyphicon glyphicon-trash" data-toggle="tooltip" title="DELETE DEPARTMENT"></i></a>';
    $table.='</td>';
    $table.='</tr>';
      }
      echo json_encode($table);     
   }
}

What exactly happens is that the window opens with the load_category() function. However, when I access it, it comes as JSON just as below

"ENT<\/td>Ear, Nose and Throat<\/td>30000<\/td>40<\/td><\/i><\/a> |<\/i><\/a><\/td><\/tr>Cancer<\/td>Cancer<\/td>100000<\/td>50<\/td><\/i><\/a> |<\/i><\/a><\/td><\/tr>ENT<\/td>Ear<\/td>40000<\/td>34<\/td><\/i><\/a> |<\/i><\/a><\/td><\/tr>"

I am totally confused about why it cant run the success funtion and echo my data into where I want it.

Thank you very much

Answer 1

I'm not sure you want to do an .html() output on a table body ( $('#category-row').html(data); ), so that might be where your problem lies. If you are wanting to add rows, I think you need to do an append.

$("#category-row").append(data);

Also, I might suggest a different method of parsing the data. I would return the whole $departments result via the json_encode, and then parse through that in the success function like my example below. In that example, I am also changing your controller's usage of count and going with if not empty ( !empty($departments) ).

Controller function:

public function departments()
{
    $departments = $this->admin_model->departments();

    if(!empty($departments)) {
        echo json_encode($departments);     
    }
}

jQuery 'success' adjustment:

success: function(data){
    var tableRows = '';

    $.each(data, function(index, dept) {

        tableRows = tableRows + '<tr id="row-id-' + dept.Dept_id + '"><td>' + dept.Dept_name + '</td><td>' + dept.Description + '</td><td>' + dept.Consultancy_amount + '</td><td>' + dept.Doctor_Percentage + '</td><td><a href="#" data-toggle="modal" data-target="#myModalUpdate"><i class="glyphicon glyphicon-edit" data-toggle="tooltip" title="EDIT DEPARTMENT"></i></a> | <a href="#" data-toggle="modal" data-target="#myModalDelete"><i class="glyphicon glyphicon-trash" data-toggle="tooltip" title="DELETE DEPARTMENT"></i></a></td>/tr>';

    });

    $("#category-row").append(tableRows);
}

More food for thought...if you want to test that the success is firing at all, put a simple alert('success'); or console.log('success') in there and see if it fires off. Maybe your query is empty.

Anyway, hope this helps.

Answer 2

The whole problem was that I was loading JQuery at the bottom not at the top. This handicapped me as I could access it.

I concluded that if ypu load jquery right at the bottom, Please use this:

 (function($) {

//All your functions go here. Be it Ajax!

        }(jQuery));

Thanks