如何使用Codeigniter将ID传递给Bootstrap模态？

Question

I have a list of products and want to edit.

when i click on edit button of particular product open a Bootstrap modal for click ID to update content.

List of data:

 <?php if (is_array($product_list)) {
    foreach ($product_list as $item): ?>
        <tr>
          <td>
            <?=$item['product_name']?></td>
          <td>
            <a href="#" class="btn btn-small z-depth-0" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" id="mts" data-id="<?=$item['product_id']?>" data-name="<?=$item['product_id']?>">
              <i class="mdi mdi-editor-mode-edit"></i>
            </a>
          </td>
        </tr>
        <?php endforeach;}

Div Where i call view :

    <div class="modal fade in" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="    background-color: #fff;
    border-radius: 2px;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
       <?php
$data['product_id'] = '32'; // This is to be dynamic when user click on product's edit button
$this->load->view('backend/pop', $data);
?>
    </div>
  </div>
</div>

JS Function:

<script type="text/javascript">
   $(document).ready(function () {
      $(document).on("click", "#mts", function () {
          var product_id = $(this).data('id');
          $('#exampleModal').on('show.bs.modal', function (event) {
              // I am confused here
          });
      });
   });    
</script>

Popup Page :

<?php 
if (is_array($subcategory)) {
    foreach ($subcategory as $item) {
        $subcat_id = $item->subcat_id;
        $subcat_name = $item->subcat_name;
    }
} else {
    $subcat_id = '';
    $subcat_name = '';
}

?>
<form action="<?=$this->
config->base_url()?>index.php?m=admin_controller&t=add_subcat&s=backend" method="post" name="form">
<div>
<h4>Update Sub Category - <strong><?=$subcat_name?></strong></h4>
  <div class="row">
    <div class="col l4 s12">
      <div class="input-field">
        <select name="cat_id">
<?php if (is_array($category_list)) {
    if ($cat_id == '') {
        echo "<option value=>Choose Category</option>";
    }
    foreach ($category_list as $item) {
        if ($item->cat_id == $cat_id) {
            echo "<option value=\"$item->cat_id\" selected>$item->category_name</option>";
        } else {
            echo "<option value=\"$item->cat_id\">$item->category_name</option>";
        }
    }
}
?>
        </select>
      </div>
    </div>
    <div class="col l4 s12">
      <div class="input-field">
        <input id="subcat_name" name="subcat_name" type="text" class="validate" value="<?=$subcat_name?>">
        <label for="subcat_name">Sub Category Name</label>
      </div>
    </div>
     <div class="col l4 s12">
      <div class="input-field">
        <input id="subcat_title" name="subcat_title" type="text" class="validate" value="<?=$subcat_title?>">
        <label for="subcat_title">Sub Category Page Title</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col l4 s12">
      <button class="btn" type="submit" name="action">Submit</button>
    </div>
  </div>
</div>

</form>

Answer 1

i try to explain how to accomplish that

your controller

class Products extends CI_Controller
{
    public function listing()
    {
        $arrViewData = array("product_list" => $this->your_model->getListData());
        $this->load->view("your-list-of-data-view", $arrViewData);
    }

    public function item($productId)
    {
        $arrViewData = array("product_item" => $this->your_model->getItem());
        $this->load->view("backend/pop", $arrViewData);
    }
}

your list view

<?php if (is_array($product_list)) {
    foreach ($product_list as $item): ?>
        <tr>
          <td>
            <?=$item['product_name']?></td>
          <td>
            <a href="#" class="btn btn-small z-depth-0 product-item" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" data-id="<?=$item['product_id']?>" data-name="<?=$item['product_id']?>">
              <i class="mdi mdi-editor-mode-edit"></i>
            </a>
          </td>
        </tr>
<?php endforeach;}

<!-- some where this code hast to be within your body -->
<div class="modal fade in" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="    background-color: #fff; border-radius: 2px;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    </div>
  </div>
</div>

your javascript

<script type="text/javascript">
   $(document).ready(function () {
      $(document).on("click", ".product-item", function () {
          var product_id = $(this).data('id');
          $('#exampleModal').on('show.bs.modal', function (event) 
          {
              // I am confused here
            $.get("/products/item/"+product_id+"/", function(data)   {
                $("div.modal div.modal-content").append(data);
            });

          });
      });
   });    
</script>

thats a basic way and should give you enough information how to do that