Я столкнулся с проблемой в JQuery. Сценарий таков, что у меня есть кнопка «Удалить» в модальном всплывающем окне. Когда я нажимаю эту кнопку, открывается всплывающее окно подтверждения. Если я нажму кнопку «ОК», я хочу отключить кнопку «Удалить». Я написал несколько JQuery, но это не работает.
<div class="modal fade" id="exampleModal" 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">Mark To Seller Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure? You will not be able to edit or delete this order any more. Continue?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="seller()">Ok</button>
</div>
</div>
</div>
<script>
var dataTable;
$(document).ready(function () {
dataTable = $("#tableId").DataTable({
"ajax": {
"url": "/Home/GetAllPurchaseOrder",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "PurchaseID", "autowidth": true },
{ "data": "SupplierID", "autowidth": true },
{ "data": "SupplierName", "autowidth": true },
{ "data": "Currency", "autowidth": true },
{ "data": "TotalAmount", "autowidth": true },
{ "data": "Date_Of_Purchase", "autowidth": true },
{ "data": "Due_Date", "width": "56px" },
{
"data": "PurchaseID", "width": "50px", "render": function (data) {
return '<button class="btn btn-danger" id="DeletePurchase" onclick="Delete(' + data + ')">Delete</button>'
}
},
{
"data": "PurchaseID", "width": "50px", "render": function (data) {
return '<button class="btn btn-success" id="ViewPurchase" onclick="Display(' + data + ')">View</button>'
}
}
]
});
});
function getpurchase() {
$.get("/Home/GetPurchasePartial", function (res) {
$("#purchaseModalBody").html(res);
$("#purchaseModal").modal('show');
})
}
function geteditpurchase(PurchaseID) {
$.get("/Home/GetEditPurchasePartial", { PurchaseID: PurchaseID }, function (res) {
$("#EditpurchaseModalBody").html(res);
$("#EditpurchaseModal").modal('show');
})
}
function CreateOrUpdate() {
var modal = $("#purchaseModal");
var form = $('form[name="purchaseForm"]');
let tableData = $('#detailsTable > tbody > tr');
console.log(tableData);
var tableDto = [];
$.each(tableData, function (rindex, row) {
console.log(row);
debugger;
let tmp = {};
tmp.pid = $(row).find('td:nth-child(1)').attr('pid');
tmp.productName = $(row).find('td:nth-child(1)').text().trim();
tmp.qty = $(row).find('td:nth-child(2)').text();
tmp.price = $(row).find('td:nth-child(3)').text();
tmp.amount = $(row).find('td:nth-child(4)').text();
tableDto.push(tmp);
tmp = {};
});
var form = $('#purchaseForm');
var purchaseDt = {};
purchaseDt.supplierName = $('#Supplier_ID option:selected').text();
purchaseDt.supplierID = $('#Supplier_ID option:selected').val();
purchaseDt.currency = $('#Currency option:selected').text();
purchaseDt.TotalAmount = $("#totalamount").val();
purchaseDt.Date_Of_Purchase = $("#datepicker").val();
purchaseDt.Due_Date = $("#datepicker1").val();
purchaseDt.Date_Departed = $("#datepicker2").val();
purchaseDt.Date_Arrived = $("#datepicker3").val();
purchaseDt.TotalQuantity = $("#totalquantity").val();
purchaseDt.Packaging_Cost = $("#Packaging_Cost").val();
purchaseDt.Inspection_Cost = $("#Inspection_Cost").val();
purchaseDt.Freight_Cost = $("#Freight_Cost").val();
purchaseDt.Other_Cost = $("#Other_Cost").val();
purchaseDt.TotalOtherCost = $(".totalothercost").val();
purchaseDt.TotalCost = $(".totalcost").val();
$.post('/Home/CreateOrUpdatePurchase', {
purchase: purchaseDt,
tableListDto: tableDto
}).done(function (result) {
GetMessage(result.message);
}).fail(function () {
window.location.href = "";
});
form.validate();
if (!form.valid()) {
return;
}
else {
var data = form.serialize();
$.post("/Home/CreateOrUpdatePurchase", data, function (res) {
if (res) {
modal.modal('hide');
dataTable.ajax.reload();
$.notify("Saved Successfully", {
className: "success",
globalPosition: 'top - center'
});
}
})
}
}
function Update() {
var modal = $("#EditpurchaseModal");
var form = $('form[name="UpdatePurchaseForm"]');
form.validate();
if (!form.valid()) {
return;
}
else {
var data = form.serialize();
$.post("/Home/UpdatePurchase", data, function (res) {
if (res) {
modal.modal('hide');
dataTable.ajax.reload();
$.notify("Update Successfully", {
className: "success",
globalPosition: 'top - center'
});
}
})
}
}
function Delete(id) {
if (confirm("Are you sure ?") == true) {
$.get("/Home/DeletePurchase", { id: id }, function (res) {
if (res) {
dataTable.ajax.reload();
$.notify("Deleted Successfully", {
className: "success",
globalPosition: 'top - center'
});
}
})
}
}
function Display(id) {
if (confirm("Are you sure ?") == true) {
$.get("/Home/DisplayPurchase", { id: id }, function (res) {
if (res) {
dataTable.ajax.reload();
$.notify("Update Successfully", {
className: "success",
globalPosition: 'top - center'
});
}
})
}
}
function seller() {
alert("Ankur");
var dataTable1 = $("#tableId").DataTable();
dataTable1.columns('delete').remove();
var modal = $("#purchaseModal");
var form = $('form[name="purchaseForm"]');
let tableData = $('#detailsTable > tbody > tr');
console.log(tableData);
var tableDto = [];
$.each(tableData, function (rindex, row) {
debugger;
console.log(row);
let tmp = {};
tmp.pid = $(row).find('td:nth-child(1)').attr('pid');
tmp.productName = $.trim($(row).find('td:nth-child(1)').text());
tmp.qty = $(row).find('td:nth-child(2)').text();
tmp.price = $(row).find('td:nth-child(3)').text();
tmp.amount = $(row).find('td:nth-child(4)').text();
tableDto.push(tmp);
tmp = {};
});
var form = $('#purchaseForm');
var purchaseDt = {};
purchaseDt.purchaseID = $('#PurchaseID').val();
purchaseDt.supplierName = $('#Supplier_ID option:selected').text();
purchaseDt.supplierID = $('#Supplier_ID option:selected').val();
purchaseDt.currency = $('#Currency option:selected').text();
purchaseDt.amount = $(".totalamount").val();
purchaseDt.Date_Of_Purchase = $("#datepicker").val();
purchaseDt.Due_Date = $("#datepicker1").val();
purchaseDt.Date_Departed = $("#datepicker2").val();
purchaseDt.Date_Arrived = $("#datepicker3").val();
purchaseDt.TotalQuantity = $("#totalquantity").val();
$.post('/Home/MarkToSeller', {
purchase: purchaseDt,
tableListDto: tableDto
}).done(function (result) {
}).fail(function () {
window.location.href = "";
});
form.validate();
if (!form.valid()) {
return;
}
else {
var data = form.serialize();
$.post("/Home/MarkToSeller", data, function (res) {
if (res) {
modal.modal('hide');
$("#purchaseModal").modal('hide');
dataTable.ajax.reload();
$.notify("Saved Successfully", {
className: "success",
globalPosition: 'top - center'
});
}
})
}
$("#DeletePurchase").hide();
}
</script>
Вот результат, который будет полезен для понимания сценария. экран1 экран2