Как сделать динамическое добавление на ajax, чтобы записи не дублировались?

Question

[kamilla00]

есть окно с формой для добавления записи, запись добавляется, но при повторном добавлении записи дублируются, затем их одновременно добавляется 3, потом 6 и т.д.
Код с ajax:

$("#modal").submit(function (e) { 
    e.preventDefault();
     var form_data = $(this).serialize();
     $.ajax({
         type: "POST", 
         url: "user/add.php", 
         data: form_data,
         success: function (html) {
             
             document.getElementById("shadow").style.display = "none";
             document.getElementById("modal").style.display = "none";
             $('#modal'). trigger('reset');
             $("#main").html(html);
         }
     });
 });

Код add.php:

//
 <?php 
require "../database/Task.php";
$task_mess = new Task;
$task_mess = $task_mess -> add_task($_POST['title'], $_POST['description']);
?>
//
<?php 
    $tasks = new Task;
    $tasks = $tasks->get_tasks(NULL, NULL);
...
  //здесь вывод блоков

Как скрыть часть кода add.php от ajax, чтобы динамический вывод блоков происходил, а добавление по несколько раз - нет?

Answer 1

[Данила]

1. Используй метод .off() для удаления предыдущих обработчиков событий перед добавлением нового.
2. Исправь код AJAX, чтобы ограничить количество перерисовок элементов.

$("#modal").off('submit').on('submit', function (e) { 
    e.preventDefault();
    var form_data = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "user/add.php",
        data: form_data,
        success: function (html) {
            document.getElementById("shadow").style.display = "none";
            document.getElementById("modal").style.display = "none";
            $('#modal').trigger('reset');
            $("#main").append(html);
        }
    });
});

add.php:

require "../database/Task.php";

if (isset($_POST['title']) && isset($_POST['description'])) {
    $task_mess = new Task;
    $task_mess->add_task($_POST['title'], $_POST['description']);

    $new_task = $task_mess->get_last_task();

    echo "<div class='task'>
            <h3>{$new_task['title']}</h3>
            <p>{$new_task['description']}</p>
          </div>";
}

Comments

[kamilla00]

спасибо❤️

[Данила]

kamilla00, не за что)