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

Question

我有一个页面显示来自数据库的项目列表。我想通过 jquery 使用引导模式打开项目详细信息。我知道 ajax 在奔向成功时会发出警报。但无法打开模态。你能告诉我错误的代码吗？谢谢

这些是我的代码：

这是模型

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();
}

这是控制器

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

这是按钮

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

这是模态

<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>

这是阿贾克斯

<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

为您的模型尝试使用以下代码：

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();
}

按钮：

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

请控制器保持回声和json_encode。还有 ajax 调用，就像这样：

//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");
      }
    });
});

请参阅控制台日志以结果 ajax 和执行过程中可能出现的错误。

Answer 2

写这个关于成功

success:function(data)
        {
          $('#Item_Detail').modal('show')
            $('#proName').text('').text(data.name_item);
            $('#proRoom').text('').text(data.room);
            $('#proBuilding').text('').text(data.building);
        }

和更改函数返回不回显

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