dozya46004
2019-07-17 06:46
浏览 72

如何使用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.

    已采纳该答案
    打赏 评论
  • duankang8114 2019-07-17 06:51

    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;
    
    }
    
    打赏 评论

相关推荐 更多相似问题