普通网友 2019-07-17 06:46
浏览 73
已采纳

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

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

        }
    })
});

  • 写回答

2条回答 默认 最新

  • doujia7517 2019-07-17 07:37
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
  • ¥20 Java-Oj-桌布的计算
  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗?
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源
  • ¥15 安卓JNI项目使用lua上的问题
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗
  • ¥15 ikuai客户端l2tp协议链接报终止15信号和无法将p.p.p6转换为我的l2tp线路