0

Я написал бек-часть веб приложения "Список дел" на spring boot, но сейчас хочу добавить простенький веб-интерфейс с помощью html и js. Список дел подгружается на главной странице из БД через html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>To Do List</title>
    <script src="/js/jquery-3.4.0.min.js"></script>
    <script src="/js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<div id="task-form">
    <form>
        <h2>Добавление дела</h2>
        <label>Дело:</label>
        <input type="text" name="name" value="">
        <hr>
        <button id="save-task">Сохранить</button>
    </form>
</div>
   <h1>Список дел</h1>
   <button id="show-add-task-form">Добавить дело</button>
   <br><br>
     <div id="task-list">
         <div th:each="task : ${tasks}">
             <a href="#" class="task-link" th:attr="data-id=${task.id}" th:text="${task.name}"></a>
         </div>
     </div>
</body>
</html>

В чем проблема: нужно, чтобы на странице сразу появлялось дело при добавление через форму. Находил инфу про куки, проверку на изменения, но не знаю, как и где это применить для себя.. Я очень плохо знаком с js, поэтому прошу не хейтить за, возможно, очевидный вопрос. Буду рад любой помощи, спасибо! JS:

$(function(){

    const appendTask = function(data){
        var taskCode = '<a href="#" class="task-link" data-id="' +
            data.id + '">' + data.name + '</a><br>';
        $('#task-list')
            .append('<div>' + taskCode + '</div>');
    };


    //Show adding task form
    $('#show-add-task-form').click(function(){
        $('#task-form').css('display', 'flex');
    });

    //Closing adding task form
    $('#task-form').click(function(event){
        if(event.target === this) {
            $(this).css('display', 'none');
        }
    });

    //Add task
    $('#save-task').click(function()
    {
        var data = $('#task-form form').serialize();
        $.ajax({
            method: "POST",
            url: '/tasks/',
            data: data,
            success: function(response)
            {
                $('#task-form').css('display', 'none');
                var task = {};
                task.id = response;
                var dataArray = $('#task-form form').serializeArray();
                for(i in dataArray) {
                    task[dataArray[i]['name']] = dataArray[i]['value'];
                }
                appendTask(task);
            }
        });
        return false;
    });

});

1 ответ 1

0

Перепробовал кучу всего и нашёл простое и изящное решение:

//Add task
    $('#save-task').click(function()
    {
        var data = $('#task-form form').serialize();
        $.ajax({
            method: "POST",
            url: '/tasks/',
            data: data,
            success: function(response)
            {
                $('#task-form').css('display', 'none');
                var task = {};
                task.id = response;
                var dataArray = $('#task-form form').serializeArray();
                for(i in dataArray) {
                    task[dataArray[i]['name']] = dataArray[i]['value'];
                }
                appendTask(task);
                $('#divSettings').html(response); //просто добавил этот кусок кода
            }
        });
        return false;
    });

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.