Как после редактирования в модальном окне сохранить данные в БД?

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

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

<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>
  • Вопрос задан
  • 117 просмотров
Решения вопроса 1
valera_91
@valera_91 Автор вопроса
Само модальное окно с формой добавления комментария и редактирования его в модальном окне
<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);
        }
    });
});


Код файла редактирования
<?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();
?>

Может кому-то понадобится. Идет добавление без обновления страницы, редактирования в модальном окне.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
NikFaraday
@NikFaraday
Student full-stack Developer
Попробуйте заменить строку
$(document).on('click','.read-more',function(e){

на
$('#your-item-id').on('click', () => {
   // ....
})


А если смотреть в общем, то у вас вообще не верная структура запроса ajax скрипта. Читайте тут
Ответ написан
Комментировать
@My1Name
Ваш 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){
....

Вы ожидаете получение данных без указания адреса (метода) выполнения. Вот это вот: redCom_id=" + comId должно быть передано в теле запроса. Примерно так:
$.ajax({
url : 'address/to-do-something',
method : 'GET',
data : {redCom:comId},
success : function(response){
....

В вашем случае, возможно будет достаточно обратиться по адресу:
$.get('/page/edit-com.php?redCom_id=' + comId, function(response){
    .....
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы