1 Тема від mihrusha

  • mihrusha
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 09.08.2022
  • Повідомлень: 1
    • Репутація: 0

Тема: зміна елементу строки у таблиці, після зміни(jquery)

Я змінюю статус декількох осіб у таблиці (за допомогою ajax jquery запит до сервера), статус змінюється, і це відображається на екрані. Якщо я хочу ще раз змінити статус осіб, то в базі даних статус змінюється, але на екрані зміни не має, доводеться перезагружати сторінку. У коді після коментарів(STATUS EDIT)

$("[name='OK']").click(function(e) {
    e.preventDefault();

    var table = []
    var id = [];
    
    $(".delete-id:checked").each(function() {
        id.push($(this).val());
        table.push($(this).closest('tr'));
        element = this;
    });

    $('#msg2').html('');

    if (id == 0) {
        $("#CheckboxCheck").modal('show');
        return false;
    }

    // if(status==undefined){
    //     status=0;
    // }

    $('#userId').val(id);
    $('#deleteId').val(id);
    $("#Editstatus").val(status);

    if ((status < 1 || status == null || status == undefined)) {
        $("#SelectCheck").modal('show');
    }

    // **********MASS DELETE************
    else if ((id != 0 && status == 3)) {

        $("#MassDeleteModal").modal('show');

        $("[name='massDel']").click(function() {
            var id = [];
            id = $('#deleteId').val();

            let Pass = 'App/View/Connector.php'

            $.ajax({
                url: Pass,
                type: 'post',
                data: {
                    mass_delete: 'mass',
                    mass_id: id
                },
                success: function(response) {

                    $(table).each(function(key, value) {

                        value.remove()
                    })

                },
                error: function(response) {
                    $('#msg2').html('Not send');
                }
            })
        })
    }

    // **********STATUS EDIT************

    if ((status == 1 || status == 2)) {
        $("#statusModal").modal('show');
        $(document).on('click', "[name='StatusEdit']", function() {
            let id = [];
            id = $('#userId').val();

            var status = $("#Editstatus").val();
            let Pass = 'App/View/Connector.php'
            t_id = $('#' + id);

            if (status == 0 || status == undefined) {
                $('#msg2').html("status' => false, 'error' => array('code' => '8', 'message' => 'please choose status'")
            }
            $.ajax({
                url: Pass,
                type: 'post',
                data: {
                    edit_status: 'edit',
                    status: status,
                    id: id
                },
                success: function(data) {
                    console.log(id);
                    arr = JSON.parse(data);
                    t_id = $('#' + id);
                    var t_name = $('#' + id).children('td[data-target=first_name]').text();

                    var t_role = $('#' + id).children('td[data-target=role]').text();

                    var some_status = arr['user']['status'];
                    var str = null;
                    if (some_status == 1) {
                        str = '<i class="fa-solid fa fa-circle  fa-2x " style="color:green">'
                    } else if (some_status == 2) {
                        str = '<i class="fa-solid fa fa-circle  fa-2x " style="color:grey">'
                    }
                    var rowContent = `<td class="text-center align-middle">${str}</td>`

                    $(table).each(function(key, value) {

                        value.children('td[data-target=status]').replaceWith(`<td class="text-center align-middle">${str}</td>`);
                    })
                    // $('#' + id).children('td[data-target=status]').replaceWith(`<td class="text-center align-middle">${str}</td>`);
                }
            })
        })
    }
})

2 Відповідь від frz

  • frz
  • frz
  • Data / DB Engineer
  • Поза форумом
  • Звідки: PL
  • Дата реєстрації: 28.12.2019
  • Повідомлень: 8 060

Re: зміна елементу строки у таблиці, після зміни(jquery)

GPT-4 написав:

Щоб вирішити цю проблему, вам потрібно забезпечити оновлення DOM після зміни статусу. Вам потрібно забезпечити оновлення елементів таблиці без перезавантаження сторінки. Ось виправлений код:

// **********STATUS EDIT************
if (status == 1 || status == 2) {
    $("#statusModal").modal('show');
    $(document).off('click', "[name='StatusEdit']"); // видалення попередніх обробників подій
    $(document).on('click', "[name='StatusEdit']", function() {
        let id = [];
        id = $('#userId').val();

        var status = $("#Editstatus").val();
        let Pass = 'App/View/Connector.php'
        t_id = $('#' + id);

        if (status == 0 || status == undefined) {
            $('#msg2').html("status' => false, 'error' => array('code' => '8', 'message' => 'please choose status'")
        }

        $.ajax({
            url: Pass,
            type: 'post',
            data: {
                edit_status: 'edit',
                status: status,
                id: id
            },
            success: function(data) {
                console.log(id);
                arr = JSON.parse(data);

                var some_status = arr['user']['status'];
                var str = null;
                if (some_status == 1) {
                    str = '<i class="fa-solid fa fa-circle  fa-2x " style="color:green">'
                } else if (some_status == 2) {
                    str = '<i class="fa-solid fa fa-circle  fa-2x " style="color:grey">'
                }

                $(table).each(function(key, value) {
                    value.children('td[data-target=status]').replaceWith(`<td class="text-center align-middle">${str}</td>`);
                })

                $("#statusModal").modal('hide'); // додано закриття модального вікна
            }

        })

    })
}

Цей код видаляє попередні обробники подій перед встановленням нового обробника подій для кнопки "StatusEdit", щоб уникнути виконання функції кілька разів. Також додається закриття модального вікна після успішного оновлення статусу.

frz вебсайт