I am currently working on implementing a list of events, each with a tick box and an x box for marking the event as complete or deleted. The challenge I'm facing is that when I click the buttons, nothing happens without refreshing the page.
I suspect that the issue stems from having multiple event boxes that are not properly identified as unique. I need to ensure that the right event is updated in the database, but I'm unsure how to make this distinction since my files only contain queries. Additionally, the data is not being posted at all when the button is clicked.
HTML/PHP
<div class="w3-card w3-round w3-white w3-center delete_mem">
<div class="w3-container">
<p>Upcoming Event</p>
<span><?= $appRow['customer_appointments_type']; ?></span>
<p><?= $appRow['customer_appointments_datetime']; ?></p>
<div class="w3-row w3-opacity">
<div class="w3-half">
<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">
<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
$(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;
}
});
$('.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;
}
});
});