来自控制器的Codeigniter呼叫方式

Question

I have a problem with calling a modal popup from controller... in this case i use datatables, and i want to make edit form as a modal popup... someone can help me...??

my datatables screenshot

here's my controller :

function datatables(){
    $this->load->library('Datatables');
    $this->datatables->from('tb_rekap_wo_tj');
    $this->datatables->select('tj_id, tj_tanggal, tj_waktu_mulai, tj_waktu_selesai, tj_halte, tj_koridor, tj_teknisi1, tj_teknisi2, tj_petugas_halte, tj_permasalahan, tj_penanganan, tj_status, tj_keterangan');
    $this->datatables->add_column('edit', '<a href="wo_gt/edit/$1" title="Edit" onclick="wo_gt/edit/$1"><button class="btn btn-warning btn-sm"><i class="fa fa-pencil"></i></button></a> <a href="wo_gt/delete/$1"><button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button></a>', 'tj_id');
    echo $this->datatables->generate();
}
public function edit($id) {
    $this->load->model('wo_model');
    $data = $this->wo_model->get_by_id($id);
    echo json_encode($data);
}

here's the result :

view result

so my question is... how to show the result as a modal popup...?? Thanks...

Answer 1

You can start with a HTML form

<div id="overlay" class="modal_overlay"></div>
<div id="dialog" class="modal_window">
"here comes the table or whatever you wish to input and alter data you get from your tables."
</div>

You'll also probably need an "Edit" button like this one:

  <input type="button" id="btnShowModal" value="Modal Dialog" />

then add some CSS to it:

<style type="text/css">


.modal_overlay
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.modal_window
{
   display: none;
   position: fixed;
   width: 380px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-left: -190px;
   margin-top: -100px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;
   font-family: Verdana;
   font-size: 10pt;
}

and JS to fire the event.

<script type="text/javascript">

   $(document).ready(function ()
   {

      $("#btnShowModal").click(function (e)
      {
         ShowDialog();
         e.preventDefault();
      });

      $("#btnClose").click(function (e)
      {
         HideDialog();
         e.preventDefault();
      });

      $("#btnSubmit").click(function (e)
      {
         //submit logic
         HideDialog();
         e.preventDefault();
      });

   });

   function ShowDialog()
   {
      $("#overlay").show();
      $("#dialog").fadeIn(300);
      $("#overlay").unbind("click");        
   }

   function HideDialog()
   {
      $("#overlay").hide();
      $("#dialog").fadeOut(300);
   } 

</script>

Basically you have an overlay which make the stuff appear modal, once you unbind the "click" it also feels that way. I didn't tried this particular code out right now but I used this technique couple of times to make a modal window.