如何使用Codeigniter將id傳遞給Bootstrap模態？

Question

我有一個產品的列表，並希望編輯。

當我點擊特定產品的編輯按鈕時，打開引導模式以點擊ID來更新內容。

清單資料：

<?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 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功能：

<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> 

彈出頁：

<?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

我試圖解釋如何實現這一目標

控制器

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); 
    } 
} 

您的列表視圖

<?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> 

你的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> 

那是一種基本的方法和應該給你足夠的信息如何做到這一點