Em bị lỗi bước khi lấy id để update.
Lấy id để update trên Popup bằng ajax
có vẻ cả 3 button Cập nhật của bạn đều có id là update.
nên selector sẽ lấy cái nút đầu tiên có data-id = 64.
Đầu tiên là bạn nên đổi qua dùng class.
Sau đó là bạn nên dùng cách khác để lấy data-id gửi lên, ví dụ khi click button Cập nhật thì bạn thêm 1 class vào button đó ví dụ selected, rồi chỗ lấy data-id bạn sửa lại selector thành $(".update.selected") để trỏ đúng button đã chọn. Nhớ bắt sự kiện khi đóng modal thì remove class selected đi nhé.
3 Likes
đúng r…nó luôn lấy nút đầu tiên. Để mình thử
vẫn chưa được ạ. a vào phần tin nhắn em gửi a xem đi
Mấu chốt nằm ở hàm Update(id) của bạn. Trong hàm có truyền tham số id. Thay vì truy vấn gây nhầm lẫn, sao bạn không dùng tham số đó có phải đơn giản không.
mình lấy id ở đây là lấy cho trên popup. Div của popup là div riêng vậy nên k dùng đc Update(id)
thật sự code rất khó tả, bạn nên post code lên thay vì tiếp tục post ảnh, bạn có tiếp tục post ảnh 1 mẩu code của bạn thì mình đoán trong vòng chục comment nữa cũng chưa giải quyết được vấn đề
1 Like
Vâng, e xem giúp em với ạ
@model PagedList.IPagedList<Models.ViewModel.FoodViewModel>
@using PagedList.Mvc
@{
ViewBag.Title = "Index";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
@section header{
Đồ uống/ Món ăn
}
@section jsFooter{
<script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Assets/Admin/libs/js/Controller/FoodController.js"></script>
}
<div class="row">
<div class="col-lg-12">
<div class="card">
<h4 class="card-header fas fa-coffee"> Danh sách đồ uống/ món ăn</h4>
<div class="card-body">
@using (Html.BeginForm("Index", "Food", FormMethod.Get))
{
<div class="row">
<div class="col-md-4">
<input type="text" value="@ViewBag.seaching" placeholder="Tìm kiếm theo tên" class="form-control" name="seaching" />
</div>
<div class="col-md-4 ">
<div class="col-lg-10">
@Html.DropDownList("idCategory", null, "--Chọn danh mục--", new { @class = "nav-link dropdown-toggle" })
</div>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-info active btn-sm"><i class="fas fa-search"></i> Tìm kiếm</button>
</div>
</div>
}
<br />
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">STT</th>
<th scope="col">Tên đồ</th>
<th scope="col">Danh mục</th>
<th scope="col">Giá</th>
<th scope="col">Tình trạng</th>
<th scope="col">Thao tác</th>
</tr>
</thead>
<tbody>
@{
var dem = 1;
var count = ViewBag.rowStart + dem;
foreach (var item in Model)
{
<tr id="[email protected]_id">
<th scope="col">@(count++)</th>
<td scope="col">@item.Food_name</td>
<td scope="col">@item.FoodCate_name</td>
<td scope="col">@item.Price</td>
<td scope="col">
<a href="#" class="btn-active" data-id="@item.Food_id">@(item.status ? "Kích hoạt" : "Khóa")</a>
</td>
<td>
<a name="CapNhat" class="btn btn-success btn-sm update" onclick="UpdateFood(@item.Food_id)" style="color:white" data-id="@item.Food_id">
<i class="fas fa-edit"></i> Cập nhập</a>
|
<a class="btn btn-warning btn-sm" id="@item.Food_id" onclick="clik(@item.Food_id)" style="color:white;"><i class="fas fa-trash-alt"></i> Xóa</a>
</td>
</tr>
}
}
</tbody>
</table>
@Html.PagedListPager(Model, page => Url.Action("Index", new { page = @page, seaching = @ViewBag.seaching, idCategory = @ViewBag.idCategory }))
</div>
</div>
</div>
@*-----POPUP-----------------------------------------------------------------------------------*@
<div id="modal-wrapper" class="modal">
@using (Html.BeginForm("Update", "Food", FormMethod.Post, new { @class = "modal-content animate" }))
{
var m = Model.FirstOrDefault(q=>q.status);
@Html.AntiForgeryToken()
<div class="imgcontainer">
<span onclick="document.getElementById('modal-wrapper').style.display='none'" class="close" title="Close PopUp">×</span>
<h1 style="text-align:center;color:#007bff">Cập nhật món ăn</h1>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="form-group row">
<label for="inputEmail2" class="col- col-lg-3 col-form-label text-right">Tên món <span>*</span></label>
<div class="col-9 col-lg-8">
<input type="text" placeholder="Enter Username" id="FoodName" class="text" name="Food_name">
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group row">
<label for="inputWebSite" class="col-3 col-lg-3 col-form-label text-right">Danh mục *</label>
<div class="col-9 col-lg-6 ">
@Html.DropDownList("idCategory", null, "--Chọn danh mục--", new { @class = "nav-link dropdown-toggle", @id = "DanhMuc", @style = "margin-left:26px;padding: 5px 81px 5px 16px;" })
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group row">
<label for="inputEmail2" class="col- col-lg-3 col-form-label text-right">Giá<span>*</span></label>
<div class="col-9 col-lg-6">
<input type="text" placeholder="Enter Password" id="Price" class="text" name="price">
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group row">
<div class="col-3 col-lg-6 col-form-label text-left">
<div class="form-check">
<label class="form-check-label">
Trạng thái *
</label>
<input type="checkbox" name="status" class="checkbox" id="ckStatus" />
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="button" id="submit" >Save</button>
</div>
}
</div>
</div>
@*Popup Update*@
<script>
//Bind giữ liệu lên popup
function UpdateFood(id) {
document.getElementById('modal-wrapper').style.display = 'block';
$.ajax({
url: '@Url.Action("Edit", "Food")',
data:
{ id: id },
type: 'GET',
dataType: 'json',
success: function (response) {
var data = response.data;
$('#FoodName').val(data.Food_name);
$('#Price').val(data.price);
$('#ckStatus').prop('checked', data.status);
$('#DanhMuc').val(data.idCategory);
},
error: function () {
alert('Lỗi rồi');
}
})
}
//Update dữ liệu
$('#submit').click(function (e) {
debugger
var list = $(".update");
list.addClass("selected");
//call ajax
var foodName = $('#FoodName').val();
var price = $('#Price').val();
var stt = $('#ckStatus').prop('checked');
var danhmuc = $('#DanhMuc').val();
var food_id = $('.update.selected').data("id");
var url = 'Admin/Food/Index';
var Food = {
Food_id: food_id,
Food_name: foodName,
price: price,
status: stt,
idCategory: danhmuc
}
$.ajax({
url: '@Url.Action("Update", "Food")',
type: 'POST',
data: Food ,
success: function () {
alert("Update success");
document.getElementById('modal-wrapper').style.display = 'none';
window.location.reload();
},
error: function () {
alert('error');
}
})
list.removeClass("selected");
e.preventDefault();
})
</script>code xử lí post ajax của bạn đâu. Cả phần code của function UpdateFood nữa
-e là thành viên mới, nên nãy không thể trả lời được tiếp. sau 1 tiếng mới trả lời được.
-Em làm được rồi a. khi e bind giữ liệu lên popup theo call ajax và dùng json return id.
OK bạn, tự fix được là tốt đó. Congrats
1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?