Редактирование пользователя в таблице при помощи Ajax

Question

Подскажите, как изменив информацию о пользователе на фронтенде, заменить строку в таблице с помощью ajax запроса, получается решить данный вопрос, только переписав заново таблицу, но это решение не устраивает.

    //Edit User
    $('#update-user').on('click', function () {
        let updateObject = {};
        updateObject["id"] = $("#id-input-hidden").val();
        updateObject["name"] = $("#username-edit").val();
        updateObject["password"] = $("#password-edit").val();
        updateObject["age"] = $("#age-edit").val();
        updateObject["roles"] = $("#role-edit").val();

        let json = JSON.stringify(updateObject);
        $.ajax({
            url: '/rest/editUser',
            type: 'PUT',
            contentType: "application/json;charset=UTF-8",
            data: json, //тип данных, передаваемых на сервер
            dataType: 'json', //тип данных, ожидаемый в качестве ответа от сервера

            success: function () {

                //НЕОБХОДИМО ЗАМЕНИТЬ СТРОКУ НЕ ПЕРЕПИСЫВАЯ ТАБЛИЦУ
                // createTable();
                $('#modal-edit .close-btn').click();

            },
            error: function () {
                alert("Error!");
            }
        })
    })
}); 

function createTable() {

    $('#tbody').empty();

    $.ajax({
        url: '/rest',
        type: 'GET',
        contentType: "application/json;charset=UTF-8",
        dataType: 'json', //тип данных, ожидаемый в качестве ответа от сервера
        success: function (data) { //функция в success сработает при получении ответа от сервера с кодом 200 - ОК
            data.forEach(function (element) {
                addTableRow(element);
            })
        },
    });
}

function addTableRow(element) {
    let id = element.id;
    let name = element.name;
    let password = element.password;
    let age = element.age;
    let roles = element.role;
    let markup = `<tr id="${id}">
                        <td id="userId-${id}">${id}</td>
                        <td id="username-${id}">${name}</td>
                        <td id="password-${id}">${password}</td>
                        <td id="userAge-${id}">${age}</td>
                        <td id="userRoles-${id}">${roles}</td>
                        <td><button type="button" class="btn btn-info edit-user" data-toggle="modal" data-target="#modal-edit" id="editButton-${id}">Edit</button></td>
                        <td><button type="button" class="btn btn-danger delete-row" data-toggle="modal" data-target="#modal-delete" id="deleteButton-${id}">Delete</button></td>
                  </tr>`;
    $('#tbody').append(markup);
}

Answer 1

Думаю так, в вашем ajax-запросе в success'е

success: function (html) {
        $("#вашid").html(html);
    }

Answer 2

В функции success можно принимать аргумент, который будет получать данные из ответа сервера. Таким образом, если принять тот факт, что возвращаются обновленные данные по одной записи, код может выглядеть как-то так:

success: function (incdata) {

    $(`tr#${incdata.id}`).html(`
        <tr id="${incdata.id}">
            <td id="userId-${incdata.id}">${incdata.id}</td>
            <td id="username-${incdata.id}">${incdata.name}</td>
            <td id="password-${incdata.id}">${incdata.password}</td>
            <td id="userAge-${incdata.id}">${incdata.age}</td>
            <td id="userRoles-${incdata.id}">${incdata.roles}</td>
            <td><button type="button" class="btn btn-info edit-user" data-toggle="modal" data-target="#modal-edit" id="editButton-${incdata.id}">Edit</button></td>
            <td><button type="button" class="btn btn-danger delete-row" data-toggle="modal" data-target="#modal-delete" id="deleteButton-${incdata.id}">Delete</button></td>
        </tr>
    `)
    $('#modal-edit .close-btn').click();

}

БЛОГ НА HUSL

Редактирование пользователя в таблице при помощи Ajax

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