Я пытаюсь получить список событий, и на каждом событии есть поле для отметки и поле для отметки «x», поэтому один для пометки события как завершенного, а другой для пометки его как удаленного. Я хочу, чтобы это происходило без обновления страницы, и каждый раз, когда я нажимаю кнопку, ничего не происходит.
Я думаю, что причиной проблемы является то, что у меня может быть более 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;
}
});
});
1 ответ
Во-первых, как вы упомянули, у вас не должно быть разных элементов с одинаковым идентификатором. Измените свой код на что-то вроде этого
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 напишите функцию, которая будет вызываться, когда кто-то нажимает кнопку удаления.
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;}
}
Новые вопросы
javascript
Для вопросов, касающихся программирования в ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (исключая ActionScript). Этот тег редко используется отдельно, но чаще всего ассоциируется с тегами [node.js], [jquery], [json] и [html].