[英]My AJAX isn't posting or responding when the user clicks submit
我正在嘗試列出事件列表,並且在每個事件上都有一個復選框和斧頭框,因此一個用於將事件標記為完成,另一個用於將其標記為已刪除。 我希望在不刷新頁面的情況下發生這種情況,並且每次單擊按鈕時都沒有任何反應。
我認為導致問題的原因是我可能有超過 1 個事件框,它們不是唯一的,但我不確定如何確保它們是唯一的,以便在我的數據庫中更新正確的事件。 我確實有單獨的文件,但它們只包含我的查詢,我遇到的問題是它甚至沒有發布數據。 當我單擊該框時,它什么也不做。
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;
}
});
});
首先,正如您所提到的,您不應該有具有相同 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>
然后對於 Javascript,編寫 function,當有人單擊刪除按鈕時將調用它
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;} }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.