was following a tutorial (
https://mfikri.com/en/blog/crud-codeigniter4-modal) it was contained 2 separate codes for Add & Edit but I want to use 1 single code for both Add & Edit. so, rename EditModal to dmlModal and used same for Add too, is this approach is right or i have to change? please if have a link for same, help post here.
created a view file which have Single Modal for both Add & Edit actions, but when click on Edit in the list view and close (
edited or not) and press Add button, the Modal shows previously selected data.
how i can refresh / reset / clear that form completely after closing no matter use made changes or not ( user pressed Close or Save button or pressing x on right top corner... in all cases ), please help.
note: i am exploring CI and not yet touched JS
regards
in Controller method ' update ' :
PHP Code:
public function update()
{
$model = new Product_model();
$id = $this->request->getPost('product_id');
if (!$id){
$data = array(
'product_name' => $this->request->getPost('product_name'),
'product_price' => $this->request->getPost('product_price'),
'product_category_id' => $this->request->getPost('product_category'),
);
$model->saveProduct($data);
}
else {
$data = array(
'product_name' => $this->request->getPost('product_name'),
'product_price' => $this->request->getPost('product_price'),
'product_category_id' => $this->request->getPost('product_category'),
);
$model->updateProduct($data, $id);
}
return redirect()->to('/product');
}
view file below:
PHP Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Product Lists</title>
<!-- <link rel="stylesheet" href="/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="<?php echo base_url('/css/bootstrap.min.css'); ?>"/>
</head>
<body>
<div class="container">
<h3>Product Lists</h3>
<!-- <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#addModal">Add New</button> -->
<button type="button" class="btn btn-success mb-2" data-toggle="modal" data-id="" data-name="" data-price="" data-category_id="" data-target="#dmlModal">Add New</button>
<table class="table table-striped">
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Category</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach($product as $row):?>
<tr>
<td><?= $row->product_name;?></td>
<td><?= $row->product_price;?></td>
<td><?= $row->category_name;?></td>
<td>
<a href="#" class="btn btn-info btn-sm btn-edit" data-id="<?= $row->product_id;?>" data-name="<?= $row->product_name;?>" data-price="<?= $row->product_price;?>" data-category_id="<?= $row->product_category_id;?>">Edit</a>
<a href="#" class="btn btn-danger btn-sm btn-delete" data-id="<?= $row->product_id;?>">Delete</a>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
<!-- Modal Add/Edit Product-->
<form action="/product/update" method="post">
<div class="modal fade" id="dmlModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add/Edit Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control product_name" name="product_name" placeholder="Product Name">
</div>
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control product_price" name="product_price" placeholder="Product Price">
</div>
<div class="form-group">
<label>Category</label>
<select name="product_category" class="form-control product_category">
<option value="">-Select-</option>
<?php foreach($category as $row):?>
<option value="<?= $row->category_id;?>"><?= $row->category_name;?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="product_id" class="product_id">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<!-- End Modal Add/Edit Product-->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
// get Edit Product
$('.btn-edit').on('click',function(){
// get data from button edit
const id = $(this).data('id');
const name = $(this).data('name');
const price = $(this).data('price');
const category = $(this).data('category_id');
// Set data to Form Edit
$('.product_id').val(id);
$('.product_name').val(name);
$('.product_price').val(price);
$('.product_category').val(category).trigger('change');
// Call Modal Edit
$('#dmlModal').modal('show');
});
// get Delete Product
$('.btn-delete').on('click',function(){
// get data from button edit
const id = $(this).data('id');
// Set data to Form Edit
$('.productID').val(id);
// Call Modal Edit
$('#deleteModal').modal('show');
});
});
</script>
</body>
</html>
tried code below ( from stackoverflow ) in my view file but didn't worked
PHP Code:
<script>
$(document).ready(function() {
$('#dmlModal').on('hidden', function() {
$(':input', this).val('');
});
});
</script>
.
Newbie here in CodeIgniter World !! Please appologize if any nonsense from me.
environment: Windows 10, XAMPP 3.3.0, VS Code, SQLyog Community Ed.