如何使用Ajax将数据提取到模态引导程序？

Question

I have one page that display list of the item from databse. I want to open the item detail with bootstrap modal through jquery. I know ajax in running to success as it throws alerts. But cannot open modal. Can you please show me the wrong code ? thank you

These are my code :

This is the Model

function get_detail_item($id){
    $this->db->select('*');
    $this->db->from('item', 'purchase');
    $this->db->join('purchase', 'purchase.id=item.id_purchase', 'inner');
    $this->db->join('status', 'status.id=item.id_status', 'inner');
    $this->db->join('category', 'category.id=item.id_category', 'inner');
    $this->db->where('item.id', $id);
    $query = $this->db->get();
    return $query->row();
}

This is the Controller

 function detail_item($id){
    $this->load->model('item_model');
    $data = $this->item_model->get_detail_item($id);
    echo json_encode($data);

}

This is the Button

<a href="#Item_Detail" class="btn btn-outline-info" data-toggle="modal" data-target="#Item_Detail" data-id="<?php echo $row->id?>">Detail</a>

This is the Modal

<div class="modal fade" id="Item_Detail" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Detail Item</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p id="proName"></p>
            <p id="proRoom"></p>
            <p id="proBuilding"></p>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

This is the Ajax

<script type="text/javascript">
$('#Item_Detail').on('show.bs.modal', function (e) {
    var productID= $(e.relatedTarget).data('id');
    $.ajax({
        url:"<?php echo base_url().'admin/detail_item/'?>/" + productID,
        method: "GET",
        dataType:"JSON",
        success:function(data)
        {
            $('#proName').val(data.name_item);
            $('#proRoom').val(data.room);
            $('#proBuilding').val(data.building);

        }
    })
});

Answer 1

Try it with this code for your model:

function get_detail_item($id){
    //I do not know if you will have get conflicts with select columns because of the same names
    $this->db->join('purchase', 'purchase.id=item.id_purchase', 'inner');
    $this->db->join('status', 'status.id=item.id_status', 'inner');
    $this->db->join('category', 'category.id=item.id_category', 'inner');
    $this->db->where('item.id', $id);
    $query = $this->db->get('item');
    return $query->row_array();
}

The button:

<a href="#" class="btn btn-outline-info js-detail" data-id="<?php echo $row->id?>">Detail</a>

Please, the controller keeps with echo and json_encode. And the ajax call, like that:

//It good practice to use a delegate event, but you choose it
$('.js-detail').on('click', function(){
var id =  $(this).data('id');
console.log("ID: " +id);
 $.ajax({
      type: 'GET',
      url: '/admin/detail_item/'+id,
      success:function(data)
        {
            var result = JSON.parse(data);
            console.log(result);
            $('#proName').text(result.name_item);
            $('#proRoom').text(result.room);
            $('#proBuilding').text(result.building);
            $('#Item_Detail').modal('show');

        }
        error: function (data) {
         alert("error");
      }
    });
});

Please, see the console log to results ajax and possible errors during execution.