如何使用 Codeigniter 将 id 传递给引导模式
How to pass id to Bootstrap modal using Codeigniter?
我有一个产品列表,想要编辑。
当我单击特定产品的编辑按钮时,打开单击 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 我在哪里调用视图:
<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>
我试图解释如何做到这一点
您的控制器
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>
这是一种基本方法,应该为您提供足够的信息来做到这一点
相关文章:
- 如何缩短MongoDB ObjectId并在Mongoose模式中使用它
- 如何将window.setTimeout与javascript和模块模式一起使用
- 如何在高级编译模式下使用 Google Closure 编译器编译 jQuery UI 小部件
- 为什么Chrome在“严格模式”下使用块内的功能时仍然保持沉默
- 在引导模式中使用“ng click”触发函数
- 如何在引导模式中使用回车键,如tab键
- 我需要在我的模式中使用bootstrap 3.0.2的popover
- 传递数据 id 以引导模式并使用它 iframe url
- 如何在使用模块模式时使用 JSDoc 记录子命名空间
- 无法在无头模式下使用 watir Webdriver 执行按钮元素的 onclick 事件 javascript
- 模式未使用新数据刷新
- jQuery UI 对话框模式仅使用类选择器打开一次
- 严格模式如何(“使用严格;)由函数继承
- 正则表达式 Javascript 在模式中使用变量
- 为什么这个推特引导模式在使用淘汰 js 时不起作用
- JavaScript 中可观察模式的使用
- 基础模式在使用 .close 按钮后无法打开
- 如何在模块模式中使用JQuery对象
- 这种模式对于使用Marionette执行区域切换正确吗
- 有没有一种方法可以在引导模式中使用引导弹出窗口