如何从mySQL中获取数据并在Modal中查看

Question

I am trying to show some records from my table columns named tid and ketprob by showing Modal when clicking on a link. The modal and query looks fine (checked by echoing last_query), but the modal is showing no data... Please help me :(

JS Code:

$('#showdata').on('click', '.item-info', function(){
  var tid = $(this).attr('data');

  $.ajax({
    type: 'ajax',
    method: 'get',
    url: '<?php echo base_url() ?>repeatproblem/infoReprob',
    data: {tid:tid},
    async: false,
    dataType: 'json',
    success: function(data){
      var html = '';
      var i;
      for(i=0; i<data.length; i++){
        html +='<p>'+data[i].tid+'</p>'+
        '<p>'+data[i].ketprob+'</p>';
      }
      $('#infoModal').modal('show');
      $('#view_errorcode').html(html);
    },
    error: function(){
      alert('Gagal Info Kode Error!');
    }
  });
});

My Controller:

public function infoReprob(){ 
    $result = $this->m->infoReprob(); 
    echo json_encode($result); 
}

My Model:

public function infoReprob(){
    $tid = $this->input->get('tid');
    $this->db->select('tid, ketprob')->where('tid', $tid);
    $query = $this->db->get('histprob');
    if($query->num_rows() > 0){
        return $query->row();
    }else{
        return false;
    }
 }

Answer 1

You are using return $query->row(); syntax in your model if this condition is true: $query->num_rows() > 0, so that means your model will return the object representation of the first row of the query and the $result variable in your controller below will be an object with two properties: tid and ketprob

public function infoReprob(){ 
    $result = $this->m->infoReprob(); 
    echo json_encode($result);
}

Now have a look at your ajax call success callback function

success: function(data){
    var html = '';
    var i;
    for(i=0; i<data.length; i++){
        html +='<p>'+data[i].tid+'</p>'+
        '<p>'+data[i].ketprob+'</p>';
    }
    $('#infoModal').modal('show');
    $('#view_errorcode').html(html);
}

Since your controller above uses echo json_encode($result); syntax, your ajax call will return the json representation of $result variable and the data variable in your success callback function above will be like below

{ "tid": "1", "ketprob": "abc" }

The problem is, data.length in your ajax success callback function will be undefined because data isn't an array, so the for loop won't be executed and html will be an empty string, see this jsfiddle. That's why your modal is showing no data.

To fix the problem, I'd suggest changing your model code as below

public function infoReprob(){
    $tid = $this->input->get('tid');
    $this->db->select('tid, ketprob')->where('tid', $tid);
    $query = $this->db->get('histprob');
    return $query->result();
}

By using return $query->result(); syntax, your model will always return an array of object. As the result, your ajax call will return a json like this

[ { "tid": "1", "ketprob": "abc" } ]

which is a json array, so data.length in your ajax success callback function won't be undefined and your modal will show the data. See this jsfiddle, you'll see that the html variable is not empty.