Проблема с удалением уроков используя модальные окна JS/HTML

Question

Я разрабатываю страницу для составления расписаний (схем расписания). Чтобы добавить урок, достаточно кликнуть по пустой ячейке, а для удаления — по ячейке, в которой уже записан урок. С добавлением уроков проблем нет, но с удалением уроков есть проблема: "Некорректные данные". Я не понимаю, как исправить ошибку:

основной файл:

<?php
require $_SERVER["DOCUMENT_ROOT"] . "/config.php";

if ($_SERVER["REQUEST_METHOD"] == "GET") {
    if (isset($_GET["scheme"])) {
        $scheme = $_GET["scheme"];
    } else {
        header("Location: ../../index.php");
        exit(); // Добавляем exit для предотвращения выполнения лишнего кода
    }
}

// Получаем количество уроков из базы данных
$res = $conn->query("SELECT COUNT(`id`) AS lesson_count FROM `{$currentschool}_calls`");
$row = $res->fetch_assoc();
$lessons = $row["lesson_count"] ?? 0; // Предотвращаем ошибки при отсутствии данных

// Получаем класс из схемы
$res = $conn->query("SELECT `grade` FROM `schemes` WHERE `scheme` = '$scheme'");
$row = $res->fetch_assoc();
$grade = $row["grade"] ?? 'Неизвестно'; // Валидация на случай пустого результата
?>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Редактирование схемы</title>
    <link rel="stylesheet" href="/style.css">
    <style>
        table.timetable {
            border: 2px solid #FFFFFF;
            width: 100%;
            text-align: center;
            border-collapse: collapse;
        }
        table.timetable td, table.timetable th {
            border: 1px solid #FFFFFF;
            padding: 3px 4px;
        }
        table.timetable tbody td {
            font-size: 16px;
            border: 1px solid black;
        }
        table.timetable tbody td:hover{
            background-color: gray;
            color: white;
        }
        table.timetable td:nth-child(even) {
            background: #EBEBEB;
        }
        table.timetable thead {
            background: #FFFFFF;
            border-bottom: 4px solid #333333;
        }
        table.timetable thead th {
            font-size: 16px;
            font-weight: bold;
            color: #333333;
            text-align: center;
            border-left: 2px solid #333333;
        }
        table.timetable thead th:first-child {
            border-left: none;
        }

        table.timetable tfoot {
            font-size: 16px;
            font-weight: bold;
            color: #333333;
            border-top: 4px solid #333333;
        }
        table.timetable tfoot td {
            font-size: 16px;
        }

        #modal, #deleteModal {
            display: none;
            position: fixed;
            z-index: 1000; /* Убедимся, что модальное окно выше всего остального */
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            width: 400px;
            max-width: 90%; /* Адаптация для мобильных */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .close {
            float: right;
            font-size: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- Модальное окно для добавления урока -->
    <div id="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <form id="lessonForm">
                <h3>Добавить урок</h3>
                <label for="lesson">Урок:</label>
                <select name="lesson" required>
                    <?php
                        $res = $conn->query("SELECT lesson FROM workload WHERE `group` = '$grade' AND school = '$currentschool'");
                        while ($row = $res->fetch_assoc()) {
                            echo "<option value='{$row['lesson']}'>{$row['lesson']}</option>";
                        }
                    ?>
                </select>
                <input type="hidden" id="dayidInput" name="dayid">
                <input type="hidden" id="dayweekInput" name="dayweek">
                <input type="hidden" name="grade" value="<?php echo htmlspecialchars($grade); ?>">
                <input type="hidden" name="scheme" value="<?php echo htmlspecialchars($scheme); ?>">
                <br><br>
                <input type="submit" value="Добавить">
            </form>
        </div>
    </div>
    
    <div id="errorContainer" style="display: none; color: red;"></div>
<div id="deleteModal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <form id="deleteForm">
            <h3>Удалить урок</h3>
            <p>Вы уверены, что хотите удалить урок <span id="deleteLesson"></span> у <span id="deleteTeacher"></span>?</p>
            <input type="hidden" name="dayid" value="" id="deleteDayid">
            <input type="hidden" name="dayweek" value="" id="deleteDayweek">
            <input type="hidden" name="lesson" value="">
            <input type="hidden" name="teacher" value="">
            <input type="submit" value="Удалить">
        </form>
    </div>
</div>

    <?php require "../../schoolhead.php"; ?>
    <h2>Редактирование схемы <?php echo htmlspecialchars($scheme); ?></h2>
    <p>Если не отображаются ячейки для добавления уроков, добавьте расписание звонков.</p>
    <center>
        <table class="timetable">
            <thead>
                <tr>
                    <th>№</th>
                    <th>ПН</th>
                    <th>ВТ</th>
                    <th>СР</th>
                    <th>ЧТ</th>
                    <th>ПТ</th>
                    <th>СБ</th>
                </tr>
            </thead>
            <tbody>
            <?php
for ($i = 1; $i <= $lessons; $i++) {
    echo "<tr><td>$i</td>";
    foreach (['понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'] as $dayweek) {
        $res = $conn->query("SELECT `lesson`, `teacher` FROM `$scheme` WHERE `dayid` = '$i' AND `dayweek` = '$dayweek'");
        $row = $res->fetch_assoc();
        
        // Проверьте, существует ли $row
        if ($row) {
            $content = "{$row['lesson']}<br>{$row['teacher']}";
            echo "<td data-dayid='$i' data-dayweek='$dayweek' data-lesson='{$row['lesson']}' data-teacher='{$row['teacher']}'>$content</td>";
        } else {
            // Если $row не существует, то используем значения по умолчанию
            echo "<td data-dayid='$i' data-dayweek='$dayweek' data-lesson='' data-teacher=''>&nbsp;</td>";
        }
    }
    echo "</tr>";
}
?>

            </tbody>
        </table>
    </center>
    <script src="script.js"></script>
</body>
</html>

script.js:

document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById('modal');
    const deleteModal = document.getElementById('deleteModal');
    const closeBtns = document.querySelectorAll('.close');
    const lessonForm = document.getElementById('lessonForm');
    const deleteForm = document.getElementById('deleteForm');
    
    document.querySelectorAll('.timetable td[data-dayid]').forEach(cell => {
        cell.addEventListener('click', function () {
            const dayid = this.dataset.dayid;
            const dayweek = this.dataset.dayweek;
            
            if (this.innerHTML.trim()) {
                const [lesson, teacher] = this.innerHTML.split('<br>');
                deleteForm.querySelector('input[name="lesson"]').value = lesson;
                deleteForm.querySelector('input[name="teacher"]').value = teacher;
                deleteForm.querySelector('input[name="dayid"]').value = dayid;
                deleteForm.querySelector('input[name="dayweek"]').value = dayweek;
                deleteModal.style.display = 'flex';
            } else {
                lessonForm.querySelector('input[name="dayid"]').value = dayid;
                lessonForm.querySelector('input[name="dayweek"]').value = dayweek;
                modal.style.display = 'flex';
            }
        });
    });

    closeBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            modal.style.display = 'none';
            deleteModal.style.display = 'none';
        });
    });

    window.addEventListener('click', event => {
        if (event.target === modal || event.target === deleteModal) {
            modal.style.display = 'none';
            deleteModal.style.display = 'none';
        }
    });

    lessonForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const formData = new FormData(lessonForm);

        fetch('ajax_add_lesson.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const cell = document.querySelector(`td[data-dayid="${data.dayid}"][data-dayweek="${data.dayweek}"]`);
                cell.innerHTML = `${data.lesson}<br>${data.teacher}`;
                modal.style.display = 'none';
            } else {
                alert('Ошибка: ' + data.message);
            }
        })
        .catch(error => console.error('Ошибка:', error));
    });

    deleteForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const formData = new FormData(deleteForm);
    
        fetch('ajax_delete_lesson.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const cell = document.querySelector(`td[data-dayid="${data.dayid}"][data-dayweek="${data.dayweek}"]`);
                cell.innerHTML = ''; // Очищаем ячейку
                deleteModal.style.display = 'none'; // Закрываем модальное окно
                alert('Урок успешно удалён!'); // Уведомляем пользователя об успехе
            } else {
                showError(data.message); // Отображаем сообщение об ошибке на странице
            }
        })
        .catch(error => {
            console.error('Ошибка:', error);
            showError('Произошла ошибка при удалении урока.'); // Отображаем общее сообщение об ошибке
        });
    });
    
    // Функция для отображения ошибки
    function showError(message) {
        const errorContainer = document.getElementById('errorContainer'); // Предполагается, что есть контейнер для ошибок
        errorContainer.textContent = message;
        errorContainer.style.display = 'block'; // Показываем контейнер с ошибкой
    }});

БЛОГ НА HUSL

Проблема с удалением уроков используя модальные окна JS/HTML

Ответы (0 шт):