Мой AJAX не публикует и не отвечает, когда пользователь нажимает кнопку Отправить.

Question

Я пытаюсь получить список событий, и на каждом событии есть поле для галочки и поле для топора, поэтому один для пометки события как завершенного, а другой для пометки его как удаленного. Я хочу, чтобы это происходило без обновления страницы, и каждый раз, когда я нажимаю кнопку, ничего не происходит.

Я думаю, что причина в том, что у меня может быть более 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;
                }
            });
        });

Answer 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;} }