Show data from another table with modal - Codeigniter

Question

i have 2 tables

Now when i click detail , i want to show data from table 2 which have reportcode as i click on table 1 (image 1)

And now i want to show it on modal , so here is the example

1) click detail button -> get reportcode -> show reimbursename,etc to modal

Can you explain to me what should i do first ? and can you suggest me a plan please ,any answers will be appreciated. Thanks

Answer 1

My suggestion is:

1 - Add one class to detail button, ie: detailButton and a data attribute or href with the especific reportCode.

<table>
   <tr> 
     <td> ... </td>
     <td> <button class='detailButton' href='<?php echo $reportCode; ?>' ... </button> </td>

2 - Add jquery to the bottom of the page:

$('.detailButton').click(function(e){
    e.preventDefault();
    var reportCode = $(this).attr('href');

    var url = "yourUrl/controller/function";
    $.post(url,{ code:reportCode },function(data){
        //do stuff
        //i.e: $('.modal').html(data).show();
    });
});

Now you have a function that gets the reportCode, sends it to your controller by POST, you return something and the function gets the response and attach to a html.

Note, this way you must return a table from your controller. You could build dinamically too.

Hope it helps!

UPDATE: You could check the values to your model and then use a exisitin template (for example one that generates the detail table), and return to your view as data to be attached at the correct position (method 1):

function detail(){
    $getcode= $this->input->post('reportCode');
    $data['showdetail'] = $this->model_expreport->showdetail($getcode);
    $ret = $this->load->view('detail_template',$data,true); //return as data   
    print_r($ret);
}

Or you could use the Method 2:

function detail(){    
   $getcode= $this->input->post('reportCode');
   $data['showdetail'] = $this->model_expreport->showdetail($getcode);

   $this->output->set_content_type('application/json');
   $this->output->set_output(json_encode($data));
}

This way, the view will recive a JSON that you could iterate and build your own page. Or you could create the full view and return it as data (in order to only append to your view).

You could use both.

In the view, you will recive either a full view:

$.post(url,{ code:reportCode },function(data){
    $('#modal').html(data); //put the 'detail' response to the modal
}

Or with JSON you must iterate and build your own div dinamically, there are a lot of tutorials for this: https://uno-de-piera.com/cargar-json-con-jquery-y-codeigniter/