我正在尝试提供事件列表,并且在每个事件上都有一个复选框和一个x框,因此一个用于将事件标记为已完成,另一个用于将事件标记为已删除。我希望这种情况不会刷新页面,并且每次单击按钮时都不会发生。
我认为导致问题的原因是,我可能有多个事件框,它们不是唯一的,但是我不确定如何确保它们是唯一的,以便正确的事件在我的数据库中得到更新。我确实有单独的文件,但它们只包含我的查询,我遇到的问题是甚至没有发布数据。当我单击该框时,它什么也没做。
HTML / PHP
<div class="w3-card w3-round w3-white w3-center delete_mem">
<div class="w3-container">
<p>Upcoming Event</p>
<!-- <img src="/w3images/avatar6.png" alt="Avatar" style="width:50%"><br> -->
<span><?= $appRow['customer_appointments_type']; ?></span>
<p><?= $appRow['customer_appointments_datetime']; ?></p>
<div class="w3-row w3-opacity">
<div class="w3-half">
<!-- <button class="w3-button w3-block w3-green w3-section" title="Complete"><i class="fa fa-check"></i></button> -->
<a id="<?= $appRow['customer_appointments_id']; ?>" class='w3-button w3-block w3-green w3-section btn-good'><i class='fa fa-check'></i></a>
</div>
<div class="w3-half">
<!-- <button class="w3-button w3-block w3-red w3-section" title="Delete"><i class="fa fa-remove"></i></button> -->
<a id="<?= $appRow['customer_appointments_id']; ?>" class='w3-button w3-block w3-red w3-section btn-danger'><i class='fa fa-remove'></i></a>
</div>
</div>
</div>
</div>
Javascript / AJAX
//Mark as deleted without refreshing the page
$(document).ready(function() {
$('.btn-danger').click(function() {
var id = $(this).attr("id");
if (confirm("Are you sure you want to delete this appointment?")) {
$.ajax({
type: "POST",
url: "scripts/lead/deleteLeadTask.php",
data: ({
id: id
}),
cache: false,
success: function(html) {
$(".delete_mem" + id).fadeOut('slow');
}
});
} else {
return false;
}
});
});
//Mark as complete without refreshing the page
$(document).ready(function() {
$('.btn-good').click(function() {
var id = $(this).attr("id");
if (confirm("Are you sure you want to complete this appointment?")) {
$.ajax({
type: "POST",
url: "scripts/lead/completeLeadTask.php",
data: ({
id: id
}),
cache: false,
success: function(html) {
$(".delete_mem" + id).fadeOut('slow');
}
});
} else {
return false;
}
});
});
答案 0 :(得分:0)
首先,正如您提到的,您不应将具有相同ID的不同元素。将代码更改为类似的内容
HTML
<button type="button" onClick='delete(<?= $appRow['customer_appointments_id']; ?>)' class='w3-button w3-block w3-red w3-section btn-danger'><i class='fa fa-remove'></i></button>
然后使用Java脚本,编写当有人单击删除按钮时将调用的函数
JavaScript
function delete(id){
if (confirm("Are you sure you want to delete this appointment?")) {
$.ajax({
type: "POST",
url: "scripts/lead/deleteLeadTask.php",
data: ({
id: id
}),
cache: false,
success: function(html) {
$(".delete_mem" + id).fadeOut('slow');
}
});
} else {
return false;}
}