show of a row data from database in modal-bootstrap using ajax in codeigniter

Question

I followed a tutorial on this web to display data in modal_bootsrap. in the tutorial there is an action to edit data using modal_bootstrap, whereas I want to use that section to display the details of the data row. I want to display data table in modal like this picture:

this table in the modal:

                <div class="modal-body">
                   <table>
                     <tr>
                       <th>Kode Rumah Jaga</th>
                       <td name="field1">RJ01</td>
                     </tr>
                     <tr>
                       <th>Daerah Irigasi</th>
                       <td name="field2">Gebong</td>
                     </tr>
                     <tr>
                         <th>Juru Pengairan</th>
                         <td name="field3">Gebong 1</td>
                     </tr>
                     <tr>
                         <th>Nama Rumah Jaga</th>
                         <td name="field4">Gebong</td>
                     </tr>
                     <tr>
                         <th>Petugas</th>
                         <td name="field5">Nasardi</td>
                     </tr>
                     <tr>
                         <th>Kecamatan</th>
                         <td name="field6">-</td>
                     </tr>
                     <tr>
                         <th>Desa</th>
                         <td name="field7">-</td>
                     </tr>
                     <tr>
                         <th>Dusun</th>
                         <td name="field8">-</td>
                     </tr>
                     <tr>
                         <th>Tahun Pembuatan</th>
                         <td name="field9">-</td>
                     </tr>
                     <tr>
                         <th>Tahun Renovasi</th>
                         <td name="field10">-</td>
                     </tr>
                 </table>

my ajax in view:

<script type="text/javascript">
        $(document).ready(function() {
           $('#rj-table').DataTable({
              "ajax": {
                url : "<?php echo site_url("main/rj_page") ?>",
                type : 'GET'
             },
           });
        });

        function view_detail(id){
            //Ajax Load data from ajax
            $.ajax({
                url : "<?php echo site_url('main/ajax_view')?>/" + id,
                type: "GET",
                dataType: "JSON",
                success: function(data)
                {
                    $('[name="field1"]').val(data.id_rumahjaga);
                    $('[name="field2"]').val(data.daerahirigasi);
                    $('[name="field3"]').val(data.jurupengairan);
                    $('[name="field4"]').val(data.namrumahjaga);
                    $('[name="field5"]').val(data.petugas);
                    $('[name="field6"]').val(data.kecamatan);
                    $('[name="field7"]').val(data.desa);
                    $('[name="field9"]').val(data.dusun);
                    $('[name="field10"]').val(data.tahunpembuatan);
                    $('#modal_form').modal('show');
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error get data from ajax');
                }
            });
        }
    </script>

this my controller

function rj_page(){
        // Datatables Variables
        $draw = intval($this->input->get("draw"));
        $start = intval($this->input->get("start"));
        $length = intval($this->input->get("length"));
        $rumahjaga = $this->m_data->get_db_rj();
        $no = $this->input->get('start');
        $data = array();
        foreach($rumahjaga->result() as $r){
            $no++;
            $row = array();
            $row[] = $no;
            $row[] = $r->namaDI;
            $row[] = $r->namarumahjaga;
            $row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Edit" onclick="view_detail('."'".$r->idrumahjaga."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>';
            $data[] = $row;
        }
        $output = array(
            "draw" => $draw,
            "recordsTotal" => $rumahjaga->num_rows(),
            "recordsFiltered" => $rumahjaga->num_rows(),
            "data" => $data
        );
        echo json_encode($output);
        exit();
    }
    public function ajax_view($id)
    {
        $data = $this->m_data->get_by_id_rj($id);
        echo json_encode($data);
    }

my model

function get_db_rj(){
    $this->db->select('*');
    $this->db->from('rumahjaga');
    $this->db->join('daerahirigasi', 'daerahirigasi.kodeDI = rumahjaga.kodeDI');
    $query = $this->db->get();
    return $query;
}
public function get_by_id_rj($id)
{
    $this->db->select('*');
    $this->db->from('rumahjaga');
    $this->db->join('daerahirigasi', 'daerahirigasi.kodeDI = rumahjaga.kodeDI');
    $this->db->where('idrumahjaga',$id);
    $query = $this->db->get();
    return $query->row();
}

I am very grateful for anyone who is willing to take time for this problem

@ReenaMori I want to display data. but I was get the solution here stackoverflow.com/questions/23013484/… — adjieq
– adjieq, Commented Feb 13, 2019 at 4:45
good..ya i will noted you will used td with name attribute it`s wrong..only html input have val attr — Reena Mori
– Reena Mori, Commented Feb 13, 2019 at 5:01

adjieq · Accepted Answer · 2019-02-13 06:25:21Z

1

i get the solution :

$('[name="field1"]').val(data.id_rumahjaga);

and

<td name="field1"></td>

change to

$('#field1').html(data.id_rumahjaga);

<td id="field1"></td>

thanks this post

edited Feb 13, 2019 at 6:25

answered Feb 13, 2019 at 4:57

adjieq

991 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

show of a row data from database in modal-bootstrap using ajax in codeigniter

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related