0

Подскажите, как изменив информацию о пользователе на фронтенде, заменить строку в таблице с помощью 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);
}

2 ответа 2

0

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

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

В функции 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();

}
3
  • Использовал ваш код, данные меняются, но только после обновления страницы на фронте 28 июл 2020 в 14:09
  • Подскажите, как сделать так, чтобы не нужно было обновлять страницу?) 28 июл 2020 в 14:24
  • Впервые слышу, что для отображения требуется обновить страницу. Очевидно, код не работает ожидаемым образом. Посмотрите в консоли что пишет. Я привел лишь ориентировочный код, не зная, что именно возвращает ваш метод
    – cauf
    28 июл 2020 в 14:27

Ваш ответ

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

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