Как после редактирования в модальном окне сохранить данные в БД?
Прошу прощения за плохой код и куча минусов. Пока пытаюсь сделать что бы все работало, затем исправлять косяки. Заранее всех благодарю за помощь.
Получаю данные в модальное окно. Дальше редактирую, но, после нажатия сохранить страница просто перезагружается. Подскажите что не так. Буду очень благодарен.
<script> $(document).on('click','.read-more',function(e){ e.preventDefault(); var comId = $(this).data('id'); $.ajax({ success: function(data){ //console.log(data); if(data) { //console.log('Success'); $("#form-content").load("/page/edit-com.php?redCom_id=" + comId, function(response){ // Если ответ не пустой, открываем модальное окно if (response) { $("#exampleModal").modal('show'); } }); } } }); }); </script> |
<script> $(document).on('click','.read-more',function(e){ e.preventDefault(); var comId = $(this).data('id'); $.ajax({ success: function(data){ //console.log(data); if(data) { //console.log('Success'); $("#form-content").load("/page/edit-com.php?redCom_id=" + comId, function(response){ // Если ответ не пустой, открываем модальное окно if (response) { $("#exampleModal").modal('show'); } }); } } }); }); </script>
Без аякса если делать GET запрос напрямую в файл то все отрабатывает хорошо.
файл edit-com.php
<?php if (isset($_POST["comId"])) { //Если это запрос на обновление, то обновляем if (isset($_GET['redCom_id'])) { $sql = mysqli_query($link, "UPDATE `tasks` SET `comId` = '{$_POST['comId']}', `comment` = '{$_POST['comment']}' WHERE `comId`={$_GET['redCom_id']}"); } //Если вставка прошла успешно if ($sql) { echo '<lable class="ok">Успешно!</lable>'; //header("refresh: 1; url=/page/company.php"); } else { echo '<lable class="ok">Произошла ошибка: ' . mysqli_error($link) . '</lable>'; } } //Если передана переменная red_id, то надо обновлять данные. Для начала достанем их из БД if (isset($_GET['redCom_id'])) { $sql = mysqli_query($link, "SELECT `comId`, `comment` FROM `tasks` WHERE `comId`={$_GET['redCom_id']}"); $product = mysqli_fetch_array($sql); } ?> <form id="form-clik" class="row g-3" action="" method="post"> <div class="col-md-5"> <label class="form-label">ID</label> <input name="comId" type="text" class="form-control comKat" value="<?= isset($_GET['redCom_id']) ? $product['comId'] : ''; ?>"> </div> <div class="col-md-4"> <label class="form-label">Комментарий</label> <input name="comment" type="text" class="form-control comment" value="<?= isset($_GET['redCom_id']) ? $product['comment'] : ''; ?>"> </div> <div class="col-12"> <input type="submit" class="savecom btn btn-primary" value="Зберегти"> </div> </form> |
<?php if (isset($_POST["comId"])) { //Если это запрос на обновление, то обновляем if (isset($_GET['redCom_id'])) { $sql = mysqli_query($link, "UPDATE `tasks` SET `comId` = '{$_POST['comId']}', `comment` = '{$_POST['comment']}' WHERE `comId`={$_GET['redCom_id']}"); } //Если вставка прошла успешно if ($sql) { echo '<lable class="ok">Успешно!</lable>'; //header("refresh: 1; url=/page/company.php"); } else { echo '<lable class="ok">Произошла ошибка: ' . mysqli_error($link) . '</lable>'; } } //Если передана переменная red_id, то надо обновлять данные. Для начала достанем их из БД if (isset($_GET['redCom_id'])) { $sql = mysqli_query($link, "SELECT `comId`, `comment` FROM `tasks` WHERE `comId`={$_GET['redCom_id']}"); $product = mysqli_fetch_array($sql); } ?> <form id="form-clik" class="row g-3" action="" method="post"> <div class="col-md-5"> <label class="form-label">ID</label> <input name="comId" type="text" class="form-control comKat" value="<?= isset($_GET['redCom_id']) ? $product['comId'] : ''; ?>"> </div> <div class="col-md-4"> <label class="form-label">Комментарий</label> <input name="comment" type="text" class="form-control comment" value="<?= isset($_GET['redCom_id']) ? $product['comment'] : ''; ?>"> </div> <div class="col-12"> <input type="submit" class="savecom btn btn-primary" value="Зберегти"> </div> </form>
Дополнительно:
GET запросы не должны менять состояние системы. Только получать данные.
Для изменения состояния используйте только POST
после нажатия сохранить страница просто перезагружается.
Вы поясните, где у вас код обработки формы что внутри модалки.
Клик по .read-more открывает модалку. А где код, который отравляет данные из этой модалки?
Само модальное окно с формой добавления комментария и редактирования его в модальном окне
<h2>Comments</h2> <div id="comments-container"> <?php while ($comment = $comment_result->fetch_assoc()) { ?> <div class="card mb-2"> <div class="card-body"> <p class="card-text"><?= $comment['comment_text'] ?></p> <button class="btn btn-primary edit-comment" data-comment-id="<?= $comment['id'] ?>" data-toggle="modal" data-target="#edit-comment-modal">Edit</button> <button class="btn btn-danger delete-comment" data-comment-id="<?= $comment['id'] ?>">Delete</button> </div> </div> <?php } ?> </div> <h2>Add Comment</h2> <form id="comment-form"> <div class="form-group"> <textarea class="form-control" name="comment_text" rows="4" placeholder="Enter your comment"></textarea> </div> <button type="submit" class="btn btn-success">Add Comment</button> </form> <div class="modal" id="edit-comment-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Edit Comment</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <textarea class="form-control" id="edited-comment-text"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" id="save-edited-comment">Save</button> <button type="button" class="btn btn-secondary" id="cancel-edit-comment" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> |
<h2>Comments</h2> <div id="comments-container"> <?php while ($comment = $comment_result->fetch_assoc()) { ?> <div class="card mb-2"> <div class="card-body"> <p class="card-text"><?= $comment['comment_text'] ?></p> <button class="btn btn-primary edit-comment" data-comment-id="<?= $comment['id'] ?>" data-toggle="modal" data-target="#edit-comment-modal">Edit</button> <button class="btn btn-danger delete-comment" data-comment-id="<?= $comment['id'] ?>">Delete</button> </div> </div> <?php } ?> </div> <h2>Add Comment</h2> <form id="comment-form"> <div class="form-group"> <textarea class="form-control" name="comment_text" rows="4" placeholder="Enter your comment"></textarea> </div> <button type="submit" class="btn btn-success">Add Comment</button> </form> <div class="modal" id="edit-comment-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Edit Comment</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <textarea class="form-control" id="edited-comment-text"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" id="save-edited-comment">Save</button> <button type="button" class="btn btn-secondary" id="cancel-edit-comment" data-dismiss="modal">Cancel</button> </div> </div> </div> </div>
$(document).ready(function() { // AJAX для добавления комментария $("#comment-form").submit(function(e) { e.preventDefault(); var commentText = $("textarea[name='comment_text']").val(); $.ajax({ type: "POST", url: "add_comment.php", data: { company_id: <?= $company_id ?>, user_id: <?= $user_id ?>, comment_text: commentText }, success: function(response) { // Обновление контейнера с комментариями после успешного добавления $("#comments-container").append("<div class='card mb-2'><div class='card-body'><p class='card-text'>" + commentText + "</p><button class='btn btn-primary edit-comment' data-comment-id='" + response + "' data-toggle='modal' data-target='#edit-comment-modal'>Edit</button><button class='btn btn-danger delete-comment' data-comment-id='" + response + "'>Delete</button></div></div>"); $("textarea[name='comment_text']").val(""); // Очистка текстового поля }, error: function(error) { console.log(error); } }); }); var commentId; // Переменная для хранения ID комментария // Обработчик для открытия модального окна редактирования комментария $(document).on("click", ".edit-comment", function() { commentId = $(this).data("comment-id"); // Сохраняем ID комментария var commentText = $(this).parent().find(".card-text").text(); // Заполнение модального окна текущим текстом комментария $("#edited-comment-text").val(commentText); }); // AJAX для редактирования комментария $("#save-edited-comment").click(function() { var editedCommentText = $("#edited-comment-text").val(); $.ajax({ type: "POST", url: "edit_comment.php", data: { comment_id: commentId, edited_comment_text: editedCommentText }, success: function(response) { if (response.trim().toLowerCase() === "success") { // Обновление текста комментария на странице $("button[data-comment-id='" + commentId + "']").parent().find(".card-text").text(editedCommentText); // Закрытие модального окна $("#edit-comment-modal").modal("hide"); } else { console.error("Error editing comment:", response); // Вывод ошибки в консоль alert("Error editing comment. Check console for details."); } }, error: function(error) { console.log(error); } }); }); |
$(document).ready(function() { // AJAX для добавления комментария $("#comment-form").submit(function(e) { e.preventDefault(); var commentText = $("textarea[name='comment_text']").val(); $.ajax({ type: "POST", url: "add_comment.php", data: { company_id: <?= $company_id ?>, user_id: <?= $user_id ?>, comment_text: commentText }, success: function(response) { // Обновление контейнера с комментариями после успешного добавления $("#comments-container").append("<div class='card mb-2'><div class='card-body'><p class='card-text'>" + commentText + "</p><button class='btn btn-primary edit-comment' data-comment-id='" + response + "' data-toggle='modal' data-target='#edit-comment-modal'>Edit</button><button class='btn btn-danger delete-comment' data-comment-id='" + response + "'>Delete</button></div></div>"); $("textarea[name='comment_text']").val(""); // Очистка текстового поля }, error: function(error) { console.log(error); } }); }); var commentId; // Переменная для хранения ID комментария // Обработчик для открытия модального окна редактирования комментария $(document).on("click", ".edit-comment", function() { commentId = $(this).data("comment-id"); // Сохраняем ID комментария var commentText = $(this).parent().find(".card-text").text(); // Заполнение модального окна текущим текстом комментария $("#edited-comment-text").val(commentText); }); // AJAX для редактирования комментария $("#save-edited-comment").click(function() { var editedCommentText = $("#edited-comment-text").val(); $.ajax({ type: "POST", url: "edit_comment.php", data: { comment_id: commentId, edited_comment_text: editedCommentText }, success: function(response) { if (response.trim().toLowerCase() === "success") { // Обновление текста комментария на странице $("button[data-comment-id='" + commentId + "']").parent().find(".card-text").text(editedCommentText); // Закрытие модального окна $("#edit-comment-modal").modal("hide"); } else { console.error("Error editing comment:", response); // Вывод ошибки в консоль alert("Error editing comment. Check console for details."); } }, error: function(error) { console.log(error); } }); });
Код файла редактирования
<?php session_start(); require_once 'config.php'; if (!isset($_SESSION['user_id'])) { exit("User not logged in."); } $user_id = $_SESSION['user_id']; if ($_SERVER["REQUEST_METHOD"] === "POST") { // Получаем данные из запроса $comment_id = $_POST["comment_id"]; $edited_comment_text = $_POST["edited_comment_text"]; // Проверяем, принадлежит ли комментарий пользователю $check_query = "SELECT * FROM comments WHERE id = $comment_id AND user_id = $user_id"; $check_result = $conn->query($check_query); if ($check_result->num_rows > 0) { // Обновляем текст комментария $update_query = "UPDATE comments SET comment_text = '$edited_comment_text' WHERE id = $comment_id"; if ($conn->query($update_query) === TRUE) { echo "success"; } else { echo "Error updating comment: " . $conn->error; } } else { echo "Invalid comment ID or unauthorized access."; } } else { echo "Invalid request method."; } $conn->close(); ?> |
<?php session_start(); require_once 'config.php'; if (!isset($_SESSION['user_id'])) { exit("User not logged in."); } $user_id = $_SESSION['user_id']; if ($_SERVER["REQUEST_METHOD"] === "POST") { // Получаем данные из запроса $comment_id = $_POST["comment_id"]; $edited_comment_text = $_POST["edited_comment_text"]; // Проверяем, принадлежит ли комментарий пользователю $check_query = "SELECT * FROM comments WHERE id = $comment_id AND user_id = $user_id"; $check_result = $conn->query($check_query); if ($check_result->num_rows > 0) { // Обновляем текст комментария $update_query = "UPDATE comments SET comment_text = '$edited_comment_text' WHERE id = $comment_id"; if ($conn->query($update_query) === TRUE) { echo "success"; } else { echo "Error updating comment: " . $conn->error; } } else { echo "Invalid comment ID or unauthorized access."; } } else { echo "Invalid request method."; } $conn->close(); ?>
Добавление комментария
<?php require_once 'config.php'; if ($_SERVER['REQUEST_METHOD'] === 'POST') { $company_id = $_POST['company_id']; $user_id = $_POST['user_id']; $comment_text = $conn->real_escape_string($_POST['comment_text']); $query = "INSERT INTO comments (company_id, user_id, comment_text) VALUES ($company_id, $user_id, '$comment_text')"; if ($conn->query($query) === TRUE) { echo "Comment added successfully"; } else { echo "Error adding comment: " . $conn->error; } } else { echo "Invalid request"; } $conn->close(); ?> |
<?php require_once 'config.php'; if ($_SERVER['REQUEST_METHOD'] === 'POST') { $company_id = $_POST['company_id']; $user_id = $_POST['user_id']; $comment_text = $conn->real_escape_string($_POST['comment_text']); $query = "INSERT INTO comments (company_id, user_id, comment_text) VALUES ($company_id, $user_id, '$comment_text')"; if ($conn->query($query) === TRUE) { echo "Comment added successfully"; } else { echo "Error adding comment: " . $conn->error; } } else { echo "Invalid request"; } $conn->close(); ?>
Может кому-то понадобится. Идет добавление без обновления страницы, редактирования в модальном окне.
Ответы:
Попробуйте заменить строку
$(document).on('click','.read-more',function(e){
на
$('#your-item-id').on('click', () => { // .... }) |
$('#your-item-id').on('click', () => { // .... })
А если смотреть в общем, то у вас вообще не верная структура запроса ajax скрипта. Читайте тут
Ваш ajax запрос неправильный (пустой).
$.ajax({ success: function(data){ //console.log(data); if(data) { //console.log('Success'); $("#form-content").load("/page/edit-com.php?redCom_id=" + comId, function(response){ .... |
$.ajax({ success: function(data){ //console.log(data); if(data) { //console.log('Success'); $("#form-content").load("/page/edit-com.php?redCom_id=" + comId, function(response){ ....
Вы ожидаете получение данных без указания адреса (метода) выполнения. Вот это вот: redCom_id=" + comId должно быть передано в теле запроса. Примерно так:
$.ajax({ url : 'address/to-do-something', method : 'GET', data : {redCom:comId}, success : function(response){ .... |
$.ajax({ url : 'address/to-do-something', method : 'GET', data : {redCom:comId}, success : function(response){ ....
В вашем случае, возможно будет достаточно обратиться по адресу:
$.get('/page/edit-com.php?redCom_id=' + comId, function(response){ ..... }); |
$.get('/page/edit-com.php?redCom_id=' + comId, function(response){ ..... });
- Если я правильно вас понял. Данные в форму я получаю, но из формы они не отправляются в базу бо по факту не понятно что должно передаваться. Передается пустые данные.
- Валерий Витальевич,
Передается пустые данные
да, вы ничего не передаёте. У вас пустой ajax запрос. И я не читаю php, поэтому отвечаю на вопрос только относительно ajax
¯_(ツ)_/¯Если вы хотите сохранить данные пользователя, то вам нужно реализовать метод сохранения и, передавать соответствующие данные. Например, перечислить через запятую:
data : {redCom:comId, userName:name, age:18 ..и т.д... },
data : {redCom:comId, userName:name, age:18 ..и т.д... },
Можно и объект в формате json отправить, но вы должны уметь его принять. Лично я не знаю как это делается на php.
Отправляемая форма принимается по адресу, который вы указываете в ajax запросе url : 'address/to-do-something' Ваш сервер должен уметь принимать и обрабатывать (сохранять) по указанному адресу соответствующую информацию.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для сохранения данных в базе данных после редактирования в модальном окне можно использовать следующий подход:
1. Создайте форму в модальном окне, которая будет содержать поля для ввода данных, например, поле для имени, поля для описания и т.д.
2. При открытии модального окна, заполните поля формы текущими значениями из базы данных. Для этого можно отправить AJAX запрос на сервер, который вернет данные для заполнения формы.
3. При нажатии на кнопку "Сохранить" в модальном окне, соберите данные из полей формы с помощью JavaScript.
4. Отправьте данные на сервер с помощью AJAX запроса. На сервере обработайте данные и выполните необходимые действия для сохранения изменений в базе данных. Например, если вы используете PHP, можно выполнить SQL запрос для обновления записи в базе данных.
Пример кода на стороне клиента (JavaScript):
// Получаем данные из полей формы var name = document.getElementById('name').value; var description = document.getElementById('description').value; // Отправляем данные на сервер $.ajax({ url: 'save_data.php', method: 'POST', data: { name: name, description: description }, success: function(response) { alert('Данные успешно сохранены в базе данных!'); }, error: function(error) { alert('Произошла ошибка при сохранении данных.'); } });
Пример кода на стороне сервера (PHP):
// Получаем данные из запроса $name = $_POST['name']; $description = $_POST['description']; // Подключаемся к базе данных $connection = mysqli_connect('хост', 'пользователь', 'пароль', 'название_базы_данных'); // Выполняем SQL запрос для обновления данных в базе $sql = "UPDATE таблица SET name='$name', description='$description' WHERE id=$id"; $result = mysqli_query($connection, $sql); // Проверяем результат выполнения запроса if($result) { echo 'Данные успешно сохранены в базе данных!'; } else { echo 'Произошла ошибка при сохранении данных.'; }
Не забудьте заменить 'хост', 'пользователь', 'пароль', 'название_базы_данных', 'таблица' и 'id' на соответствующие значения в вашем случае. Важно также обработать возможные ошибки при сохранении данных и предусмотреть защиту от SQL инъекций.