How to Fetch Data to Modal Bootstrap Using Ajax? - php

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
Detail
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">×</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:
Detail
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.

Answer 2

Write this on success
success:function(data)
{
$('#Item_Detail').modal('show')
$('#proName').text('').text(data.name_item);
$('#proRoom').text('').text(data.room);
$('#proBuilding').text('').text(data.building);
}
and change function return not echo
function detail_item($id){
$this->load->model('item_model');
$data = $this->item_model->get_detail_item($id);
return $data;
}