Why i have error in datatables when rendering it?

I have a Datatables and i want to see the data if APPROVE OR DISAPPROVE the status but when i APPROVE it or DISAPPROVE it gives me an error in alert box. so i need to press ok to see the data, but i want to remove the alert box. how can i do that?

it says DataTables warning: table id=services_table – Requested unknown parameter ‘null’ for row 0, column 9. For more information about this error, please see http://datatables.net/tn/4

appointment.js

$(document).ready(function () {
    const user = $("#user_type").val();
    var table = $("#services_table").DataTable({
        processing: true,
        serverSide: true,
        responsive: false,
        autoWidth: false,
        buttons: false,
        order: [[0, "asc"]],
        ajax: {
            url: "/scheduleList",
            error: function (xhr) {
                if (xhr.status == 401) {
                    window.location.replace("/login");
                } else {
                    toastr.error("An error occured, please try again later");
                }
            },
        },
        columns: [
            {
                data: "patient",
                name: "patient",
                searchable: true,
            },
            {
                data: "service",
                name: "services",
                searchable: true,
            },
            {
                data: "price",
                name: "price",
                searchable: true,
            },
            {
                data: "schedule_date",
                name: "schedule_date",
                searchable: true,
            },
            {
                data: "time_from",
                name: "time_from",
                searchable: true,
                render: function (data, type) {
                    if (type === "sort") {
                        return data;
                    } else {
                        return data === "00:00:00"
                            ? "00:00:00"
                            : moment(data, "HH:mm:ss").format("h:mm A");
                    }
                },
            },
            {
                data: "time_to",
                name: "time_to",
                searchable: true,
                render: function (data, type) {
                    if (type === "sort") {
                        return data;
                    } else {
                        return data === "00:00:00"
                            ? "00:00:00"
                            : moment(data, "HH:mm:ss").format("h:mm A");
                    }
                },
            },
            {
                data: "doctor_name",
                name: "doctor_name",
                searchable: true,
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                class: "text-right",
                render: function (data, type, row) {
                    if (data.status == "0") {
                        return "PENDING";
                    } else if (data.status == "1") {
                        return "APPROVED";
                    } else if (data.status == "2") {
                        return "DISAPPROVED";
                    } else if (data.status == "3") {
                        return "Done Appointment / For Result Releasing";
                    } else if (data.status == "4") {
                        return "For Accounting";
                    } else if (data.status == "5") {
                        return "Done Transaction";
                    } else {
                        return "Unknown Status";
                    }
                },
            },
            {
                data: "created_at",
                name: "created_at",
                searchable: true,
                class: "v-middle",
                render: function (data, type) {
                    return type === "sort"
                        ? data
                        : moment(data).isValid()
                        ? moment(data).format("ll")
                        : "---";
                },
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                class: "text-right",
                render: function (data, type, row) {
                    if (user == "patient") {
                        if (data.status == 0) {
                            return (
                                '<button type="button"  data-id=' +
                                data.id +
                                ' data-doctor="' +
                                data.doctor +
                                '" data-service="' +
                                data.service_id +
                                '" data-schedule_date="' +
                                data.schedule_date +
                                '" data-time_from="' +
                                data.time_from +
                                '" data-time_to="' +
                                data.time_to +
                                '"  data-bs-toggle="modal" data-bs-target="#modal_add" class="edit btn btn-sm btn-secondary"><i class="fa fa-pencil-alt"></i></button>'
                            );
                        } else if (data.status == 4) {
                            return (
                                '<button type="button"  data-id=' +
                                data.id +
                                '" data-patient="' +
                                data.patient +
                                '" data-patient_id="' +
                                data.user_id +
                                '" data-schedule_date="' +
                                data.schedule_date +
                                '"  data-bs-toggle="modal" data-bs-target="#modal_download" id="download-prescription" class="btn btn-sm btn-secondary"><i class="fa fa-download"></i></button>'
                            );
                        }
                    } else if (user == "doctor") {
                        if (data.status == 0) {
                            return (
                                '<button type="button"  data-id=' +
                                data.id +
                                '" data-patient="' +
                                data.patient +
                                '" data-patient_id="' +
                                data.user_id +
                                '" data-schedule_date="' +
                                data.schedule_date +
                                '"  data-bs-toggle="modal" data-bs-target="#modal_approve" id="approve" class="btn btn-sm btn-secondary"><i class="fa fa-thumbs-up"></i></button>'
                            );
                        } else if (data.status == 1) {
                            return (
                                '<button type="button" data-id="' +
                                data.id +
                                '" data-patient="' +
                                data.patient +
                                '" data-service="' +
                                data.service_id +
                                '" data-patient_id="' +
                                data.user_id +
                                '" data-bs-toggle="modal" data-bs-target="#change-status-to-done-appointment-modal" id="prescription" class="btn btn-sm btn-secondary"><i class="fa fa-prescription"></i></button>'
                            );
                        } else if (data.status == 3) {
                            return (
                                '<button type="button" data-id="' +
                                data.id +
                                '" data-patient="' +
                                data.patient +
                                '" data-service="' +
                                data.service_id +
                                '" data-patient_id="' +
                                data.user_id +
                                '" data-bs-toggle="modal" data-bs-target="#modal_prescription" id="prescription" class="btn btn-sm btn-secondary"><i class="fa fa-prescription"></i></button>'
                            );
                        } else if (data.status == 4) {
                            return (
                                '<button type="button" data-id="' +
                                data.id +
                                '" data-patient="' +
                                data.patient +
                                '" data-service="' +
                                data.service_id +
                                '" data-patient_id="' +
                                data.user_id +
                                '" data-bs-toggle="modal" data-bs-target="#change-status-to-done-transaction-modal" id="prescription" class="btn btn-sm btn-secondary"><i class="fa fa-prescription"></i></button>'
                            );
                        } else {
                            return "<span>No available</span>";
                        }
                    } else if (user == "admin") {
                        if (data.status == 0) {
                            return (
                                '<button type="button"  data-id=' +
                                data.id +
                                '" data-patient="' +
                                data.patient +
                                '" data-patient_id="' +
                                data.user_id +
                                '" data-schedule_date="' +
                                data.schedule_date +
                                '"  data-bs-toggle="modal" data-bs-target="#modal_approve" id="approve" class="btn btn-sm btn-secondary"><i class="fa fa-thumbs-up"></i></button>'
                            );
                        } else if (data.status == 1) {
                            return (
                                '<button type="button" data-id="' +
                                data.id +
                                '" data-patient="' +
                                data.patient +
                                '" data-service="' +
                                data.service_id +
                                '" data-patient_id="' +
                                data.user_id +
                                '" data-bs-toggle="modal" data-bs-target="#change-status-to-done-appointment-modal" id="prescription" class="btn btn-sm btn-secondary"><i class="fa fa-prescription"></i></button>'
                            );
                        } else if (data.status == 3) {
                            return (
                                '<button type="button" data-id="' +
                                data.id +
                                '" data-patient="' +
                                data.patient +
                                '" data-service="' +
                                data.service_id +
                                '" data-patient_id="' +
                                data.user_id +
                                '" data-bs-toggle="modal" data-bs-target="#modal_prescription" id="prescription" class="btn btn-sm btn-secondary"><i class="fa fa-prescription"></i></button>'
                            );
                        } else if (data.status == 4) {
                            return (
                                '<button type="button" data-id="' +
                                data.id +
                                '" data-patient="' +
                                data.patient +
                                '" data-service="' +
                                data.service_id +
                                '" data-patient_id="' +
                                data.user_id +
                                '" data-bs-toggle="modal" data-bs-target="#change-status-to-done-transaction-modal" id="prescription" class="btn btn-sm btn-secondary"><i class="fa fa-prescription"></i></button>'
                            );
                        } else {
                            return "<span>No available</span>";
                        }
                    } else {
                        return "<span>No available</span>";
                    }

                    // if(user == 'patient' && data.status == 0){
                    //     return '<button type="button"  data-id=' + data.id + ' data-doctor="' + data.doctor
                    //     + '" data-service="' + data.service_id
                    //     + '" data-schedule_date="' + data.schedule_date
                    //     + '" data-time_from="' + data.time_from
                    //     + '" data-time_to="' + data.time_to
                    //     + '"  data-bs-toggle="modal" data-bs-target="#modal_add" class="edit btn btn-sm btn-secondary"><i class="fa fa-pencil-alt"></i></button>';
                    // }else if(user == 'patient' && (data.status == 1)){
                    //     return '<button type="button"  data-id=' + data.id
                    //     + '" data-patient="' + data.patient
                    //     + '" data-patient_id="' + data.user_id
                    //     + '" data-schedule_date="' + data.schedule_date
                    //     + '"  data-bs-toggle="modal" data-bs-target="#modal_download" id="download-prescription" class="btn btn-sm btn-secondary"><i class="fa fa-download"></i></button>';
                    // }else if (user == 'doctor' && data.status == 0){
                    //     return '<button type="button"  data-id=' + data.id
                    //     + '" data-patient="' + data.patient
                    //     + '" data-patient_id="' + data.user_id
                    //     + '" data-schedule_date="' + data.schedule_date
                    //     + '"  data-bs-toggle="modal" data-bs-target="#modal_approve" id="approve" class="btn btn-sm btn-secondary"><i class="fa fa-thumbs-up"></i></button>';
                    // }else if (user == 'doctor' && data.status == 1) {
                    //     return '<button type="button" data-id="' + data.id +
                    //     '" data-patient="' + data.patient +
                    //     '" data-service="' + data.service_id +
                    //     '" data-patient_id="' + data.user_id +
                    //     '" data-bs-toggle="modal" data-bs-target="#modal_prescription" id="prescription" class="btn btn-sm btn-secondary"><i class="fa fa-prescription"></i></button>';
                    // } else if (user == 'doctor' && (data.status == 1 || data.status == 2)){
                    //     return '<span>No available</span>';
                    // }else if (user == 'admin' && data.status == 0){
                    //     return '<button type="button"  data-id=' + data.id
                    //     + '" data-patient="' + data.patient
                    //     + '" data-schedule_date="' + data.schedule_date
                    //     + '" data-patient_id="' + data.user_id
                    //     + '"  data-bs-toggle="modal" data-bs-target="#modal_approve" id="approve" class="btn btn-sm btn-secondary"><i class="fa fa-thumbs-up"></i></button>'
                    //     +'<button type="button"  data-id=' + data.id + ' data-doctor="' + data.doctor
                    //     + '" data-service="' + data.service_id
                    //     + '" data-schedule_date="' + data.schedule_date
                    //     + '" data-time_from="' + data.time_from
                    //     + '" data-time_to="' + data.time_to
                    //     + '"  data-bs-toggle="modal" data-bs-target="#modal_add" class="edit btn btn-sm btn-secondary"><i class="fa fa-pencil-alt"></i></button>';
                    // }else if (user == 'admin' && (data.status == 1 || data.status == 2)){
                    //     return '<span>No available</span>';
                    // }
                },
            },
        ],
        drawCallback: function (settings, json) {
            $(".tooltips").tooltip();
        },
    });

    $("#new").on("click", function (e) {
        $("#data_id").val(0);
        $("#service").val("");
        $("#doctor").val("");
        $("#schedule_date").val("");
    });

    $("#save_btn").on("click", function (e) {
        e.preventDefault();

        var btn = $(this);
        var form = $(this).closest("form");

        form.validate({
            rules: {
                service_name: {
                    required: true,
                },
                price: {
                    required: true,
                },
            },
        });

        if (!form.valid()) {
            return;
        }

        btn.attr("disabled", true);
        var data = new FormData(form[0]);

        //$('#msg').css('display', 'block');
        let url =
            $("#data_id").val() == 0
                ? "/createAppointment"
                : "/updateAppointment";

        $.ajax({
            type: "POST",
            url: url,
            data: data,
            processData: false,
            contentType: false,
            beforeSend: function () {
                $("#msg").empty();
            },

            // success: function(result) {
            //     if (result === 'warning_past_date') {
            //         Swal.fire({
            //             position: "top-end",
            //             icon: 'warning',
            //             title: 'You cannot book an appointment in the past. Please choose a future date.',
            //             showConfirmButton: false,
            //             timer: 3000
            //         });
            //         window.location.reload();
            //     } else if (result === 'warning') {
            //         Swal.fire({

            //             icon: 'warning',
            //             title: 'Someone has already booked an appointment at the same time. Please choose a different time.',
            //             showConfirmButton: false,
            //             timer: 3000
            //         });
            //         window.location.reload();
            //     } else if (result === 'warning') {
            //         Swal.fire({

            //             icon: 'warning',
            //             title: 'Doctor appointment limit reached. Please wait for availability or try another time slot.',
            //             showConfirmButton: true,
            //             timer: 3000
            //         });
            //         window.location.reload();
            //     } else if (result === 'success') {
            //         Swal.fire({

            //             icon: 'success',
            //             title: 'Your appointment has been received and is under review. Please wait for confirmation.',
            //             showConfirmButton: true,
            //             timer: 3000
            //         });
            //         window.location.reload();
            //     } else if (result === 'update') {
            //         Swal.fire({

            //             icon: 'success',
            //             title: 'Appointment updated successfully!',
            //             showConfirmButton: true,
            //             timer: 3000
            //         });
            //         window.location.reload();
            //     } else {
            //         Swal.fire({

            //             icon: 'error',
            //             title: 'Error: ' + result,
            //             showConfirmButton: true,
            //             timer: 3000
            //         });
            //     }
            //     btn.attr('disabled', false);
            // }

            success: function (result) {
                let swalConfig = {}; // Configure SweetAlert2 options

                if (result === "warning_past_date") {
                    swalConfig = {
                        icon: "warning",
                        title: "You cannot book an appointment in the past. Please choose a future date.",
                    };
                } else if (result === "warning") {
                    swalConfig = {
                        icon: "warning",
                        title: "Someone has already booked an appointment at the same time. Please choose a different time.",
                    };
                } else if (result === "warning_limit") {
                    swalConfig = {
                        icon: "warning",
                        title: "Doctor appointment limit reached. Please wait for availability or try another time slot.",
                    };
                } else if (result === "success") {
                    swalConfig = {
                        icon: "success",
                        title: "Your appointment has been received and is under review. Please wait for confirmation.",
                    };
                } else if (result === "update") {
                    swalConfig = {
                        icon: "success",
                        title: "Appointment updated successfully!",
                    };
                } else {
                    swalConfig = {
                        icon: "error",
                        title: "Error: " + result,
                    };
                }

                // Display SweetAlert2 with configured options
                Swal.fire(swalConfig).then(() => {
                    // This block will be executed after the user clicks the "OK" button
                    btn.attr("disabled", false);
                    window.location.reload();
                });
            },
        });
    });

    // // Edit - with universal route
    // $('table tbody').on('click', '.edit', function() {
    //     console.log($(this).data())
    //     $('#data_id').val($(this).data('id'));
    //     $('#service').val($(this).data('service'));
    //     $('#doctor').val($(this).data('doctor'));
    //     $('#schedule_date').val($(this).data('schedule_date'));
    //     $('#time_from').val($(this).data('time_from'));
    //     $('#time_to').val($(this).data('time_to'));
    // });

    // $('table tbody').on('click', '#approve', function() {
    //     $('#data_id').val($(this).data('id'));
    //     $('#patient_id').val($(this).data('patient_id'));
    //     $('#client_info').html('patient '+$(this).data('patient')+' on '+$(this).data('schedule_date'))
    // });

    // $('#approve_btn').click(function(){
    //     $.ajax({
    //         type: 'GET',
    //         url: '/approveAppointment/'+$('#data_id').val()+'/approved/'+$('#patient_id').val(),
    //         processData: false,
    //         contentType: false,
    //         beforeSend: function(){
    //             $('#msg').empty();
    //         },
    //         success: function(result) {
    //             //toastr.clear();
    //             if(result != 'success'){
    //                 alert(result)
    //             }else{
    //                 alert('save')
    //                 window.location.reload();
    //             }
    //             btn.attr('disabled', false);
    //         }
    //     });
    // })
    // Edit - with universal route
    $("table tbody").on("click", ".edit", function () {
        console.log($(this).data());
        $("#data_id").val($(this).data("id"));
        $("#service").val($(this).data("service"));
        $("#doctor").val($(this).data("doctor"));
        $("#schedule_date").val($(this).data("schedule_date"));
        $("#time_from").val($(this).data("time_from"));
        $("#time_to").val($(this).data("time_to"));
    });

    $("table tbody").on("click", "#approve", function () {
        $("#data_id").val($(this).data("id"));
        $("#patient_id").val($(this).data("patient_id"));
        $("#client_info").html(
            "patient " +
                $(this).data("patient") +
                " on " +
                $(this).data("schedule_date")
        );
    });

    $("#approve_btn").click(function () {
        var btn = $(this);

        $.ajax({
            type: "GET",
            url:
                "/approveAppointment/" +
                $("#data_id").val() +
                "/approved/" +
                $("#patient_id").val(),
            processData: false,
            contentType: false,
            beforeSend: function () {
                $("#msg").empty();
            },
            success: function (result) {
                let swalConfig = {}; // Configure SweetAlert2 options

                if (result === "success") {
                    swalConfig = {
                        icon: "success",
                        title: "Appointment approved successfully!",
                    };
                } else {
                    swalConfig = {
                        icon: "error",
                        title: "Error: " + result,
                    };
                }

                // Display SweetAlert2 with configured options
                Swal.fire(swalConfig).then(() => {
                    // This block will be executed after the user clicks the "OK" button
                    btn.attr("disabled", false);
                    window.location.reload();
                });
            },
        });
    });

    $("#cancel_btn").click(function () {
        $.ajax({
            type: "GET",
            url:
                "/approveAppointment/" +
                $("#data_id").val() +
                "/disapproved/" +
                $("#patient_id").val(),
            processData: false,
            contentType: false,
            beforeSend: function () {
                $("#msg").empty();
            },
            success: function (result) {
                //toastr.clear();
                if (result != "success") {
                    alert(result);
                } else {
                    alert("save");
                    window.location.reload();
                }
                btn.attr("disabled", false);
            },
        });
    });

    //Save Prescription
    $("table tbody").on("click", "#prescription", function () {
        $("#data_id").val($(this).data("id"));
        $("#patient_id").val($(this).data("patient_id"));
        $("#client_info").html(
            "patient " +
                $(this).data("patient") +
                " on " +
                $(this).data("schedule_date")
        );
        $("#service").val($(this).data("service"));
    });

    $("#prescribe_btn").on("click", function () {
        var prescriptionData = {
            id: $("#patient_id").val(),
            result: $("#result").val(),
            service: $("#service").val(),
            appointmentId: $("#data_id").val(),
        };

        $.ajax({
            type: "POST",
            url: "prescription",
            data: prescriptionData,
            beforeSend: function () {
                $("#msg").empty();
            },
            success: function (result) {
                if (result != "success") {
                    alert(result);
                } else {
                    alert("save");
                    window.location.reload();
                }
                btn.attr("disabled", false);
            },
        });
    });

    //Download Prescription
    $("table tbody").on("click", "#download-prescription", function () {
        $("#download_data_id").val($(this).data("id"));
        $("#download_patient_id").val($(this).data("patient_id"));

        $("#download-form").attr("action", `/generate-prescription`);
    });

    $("#confirm_download_btn").on("click", function () {
        // var prescriptionData = {
        //     id: $('#data_id').val(),
        //     patientId: $('#patient_id').val(),
        // };
        // $.ajax({
        //     type: 'GET',
        //     url: 'generate-prescription',
        //     data: prescriptionData,
        //     beforeSend: function() {
        //         $('#msg').empty();
        //     },
        //     success: function(result) {
        //         // Convert the result content to a Blob
        //         var blob = new Blob([result], { type: 'application/pdf' });
        //         // Create a download link
        //         var downloadLink = document.createElement('a');
        //         downloadLink.href = URL.createObjectURL(blob);
        //         downloadLink.download = 'prescription.pdf';
        //         // Append the link to the body
        //         document.body.appendChild(downloadLink);
        //         // Trigger a click on the link to start the download
        //         downloadLink.click();
        //         // Remove the link from the body
        //         document.body.removeChild(downloadLink);
        //         // btn.attr('disabled', false);
        //     }
        // });
    });
});

‘querySelectorAll()’ returns [object NodeList] instead of actual value

As the title suggests I’m having troubles when trying to get the values of some of my HTML divs in JavaScript.

I have two separate functions and they’re practically written equally, but where in showDiv1, ‘var allCharacters = container.querySelectorAll(‘.planet-waves-container > div’);’ returns an actual list with values, in revealDiv1 it only returns [object NodeList]

Here is a snippet of the HTML:

<div class="planet-waves" id="planet-waves">
                <div class="titulo1">Planet Waves</div>
                <div class="grupo-botoes">
                    <div class="klee-rad" id="klee" name="checkbox1" value="klee" onclick="toggleButton('klee','grupo-botoes'); moveDiv1('klee');"></div>
                    <div class="ayaka-rad" id="ayaka" name="checkbox1" value="ayaka" onclick="toggleButton('ayaka','grupo-botoes'); moveDiv1('ayaka');"></div>
                    <div class="ningguang-rad" id="ningguang" name="checkbox1" value="ningguang" onclick="toggleButton('ningguang','grupo-botoes'); moveDiv1('ningguang');"></div>
                    <div class="zhongli-rad" id="zhongli" name="checkbox1" value="zhongli" onclick="toggleButton('zhongli','grupo-botoes'); moveDiv1('zhongli');"></div>
                </div>
                <div class="planet-waves-container">
                    <div class="klee">
                        <img src="../Dados/Genshin_html_images/Teams/Planet%20Waves/Character_Klee_Full_Wish.png">
                        <div class="klee-bot">
                            <div class="solar" id="solar" name="checkbox1.1" value="solar" onclick="toggleButton('solar','klee-bot'); revealDiv1('solar','klee')"></div>
                            <div class="shim" id="shim" name="checkbox1.1" value="shim" onclick="toggleButton('shim','klee-bot'); revealDiv1('shim','klee')"></div>
                        </div>
                        <div class="klee-textos">
                            <div class="texto-solar">
                                <div class="titulo3">Solar Pearl</div>
                                <div class="corpo-descricao-4">
                                    <p>Base ATK: 510; CRIT Rate 27.6%</p>
                                    <p>Solar Shine: Normal Attack hits increase Elemental Skill and Elemental Burst DMG
                                        by 20~40% for 6s. Likewise, Elemental Skill or Elemental Burst hits increase Normal
                                        Attack DMG by 20~40% for 6s.</p>
                                </div>
                            </div>
                            <div class="texto-shim">
                                <div class="titulo3">Shimenawa's Reminiscence ④</div>
                                <div class="corpo-descricao-4">
                                    <p>2 Piece: ATK +18%</p>
                                    <p>4 Piece: When casting an Elemental Skill, if the character has 15 or more Energy,
                                        they lose 15 Energy and Normal/Charged/Plunging Attack DMG is increased by 50% for
                                        10s. This effect will not trigger again during that duration.</p>
                                </div>
                            </div>
                        </div>
                    </div>

JavaScript function showDiv1():

function moveDiv1(character) {
    console.log("moveDiv1 function called with character: " + character);
    var container = document.querySelector('.planet-waves-container');
    var characterDivImg = container.querySelector('.' + character + ' img');
    var characterDivItems = container.querySelector('.' + character + ' .' + character + '-bot');
    var characterDivItemsDescr = container.querySelector('.' + character + ' .' + character + '-textos');
    var allDivs = container.querySelectorAll('div[class$="-rad"]');
    var allCharacterDivsImg = container.querySelectorAll('.planet-waves-container > div img');
    var allCharacters = container.querySelectorAll('.planet-waves-container > div');
    var allCharacterDivsItems = [];

    allCharacters.forEach(function(character) {
        allCharacterDivsItems.push(container.querySelectorAll('.'+character.classList[0]+' > div'));
    });

    console.log("All characters: ", allCharacters);
    console.log("All character div items: ", allCharacterDivsItems);
    console.log("Character Image: ", characterDivImg);
    console.log("Character Items: ", characterDivItems);

    allCharacterDivsImg.forEach(function(div) {
        console.log("Adding hide2 class to all img elements");
        div.classList.add('hide2');
    });

    for (let i = 0; i < allCharacterDivsItems.length; i++) {
        allCharacterDivsItems[i].forEach(function(div) {
            console.log("Adding hide2 class to div items");
            div.classList.add('hide2');
        });
    }

    characterDivImg.classList.remove('hide2');
    characterDivImg.classList.remove('hide1');
    characterDivItems.classList.remove('hide2');
    characterDivItems.classList.remove('hide1');
    characterDivItemsDescr.classList.remove('hide2');
    characterDivItemsDescr.classList.remove('hide1');

    container.classList.remove('show1');

    setTimeout(function() {
        console.log("Adding show1 class to images and items");
            characterDivImg.classList.add('show1');
            characterDivItems.classList.add('show1');
            characterDivItemsDescr.classList.add('show1');
    }, 0);

    return allCharacters;
}

JavaScript function revealDiv1():

function revealDiv1(item, character) {
    var container = document.querySelector('.planet-waves-container');
    var characterDivItemsDescr = container.querySelector('.' + character + '-textos');
    var itemDescr = characterDivItemsDescr.querySelector('.texto-' + item);
    var allItems = [];
    var allCharacters = container.querySelectorAll('.planet-waves-container > div');
    var allCharacterDivsItems = [];

    console.log("All Characters: " + allCharacters)

    allCharacters.forEach(function(character) {
        allCharacterDivsItems.push(container.querySelectorAll('.'+character.classList[0]+' > div'));
    });


    console.log("All Character Divs Items: " + allCharacterDivsItems)

    console.log('All Items: ' + allItems)

    var allCharacterDivItemsDescr = [];

    console.log('All Character Items Descriptions: ' + allCharacterDivItemsDescr);

    allCharacterDivItemsDescr.forEach(function(div) {
        div.classList.add('vanish');
    });

    itemDescr.classList.remove('vanish');
    container.classList.remove('vanish');

    setTimeout(function() {
        itemDescr.classList.add('reveal');
    }, 500);
}

Thanks in advance for the help!

I already tried practically everything, but I’m kinda working on crunch for uni and haven’t slept well in a while. So I just can’t seem to figure this out.

Realtime Database Firebase Function trigger deployed from VSCode

I am very new to this realm of programming and I was running into some issues not with deploying my Firebase Function to my Firebase Project but testing the function itself and its execution.
The following is a test code I am using that should log the response when this testTrigger has been created with new data. But no luck, for some reason the deployment is successful but when I look at the logs they’re just notice logs that the deployment was successful, no execution logs. Anyone have any tips, I am quite lost.
Please let me know if you need more information!
Thanks ! 🙂

My code:

const functions = require("firebase-functions");
const admin = require("firebase-admin");

admin.initializeApp({
  databaseURL: "https://databaseurl123.firebaseio.com/"
});

exports.checkDatabaseTrigger = functions.database.ref("/testTrigger")
    .onCreate((snapshot, context) => {
      console.log("data added testTrigger:", snapshot.val());
      return null; 
    });

dependencies:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint . --fix",
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "18"
  },
  "main": "index.js",
  "dependencies": {
    "firebase-admin": "^11.8.0",
    "firebase-functions": "^4.3.1"
  },
  "devDependencies": {
    "eslint": "^8.15.0",
    "eslint-config-google": "^0.14.0",
    "firebase-functions-test": "^3.1.0"
  },
  "private": true
}

Steps that I have followed:

  1. I deploy this very index.js script
  2. On my Firebase Functions I wait for the update of the function
  3. Then I go to my Realtime Database specifically this URL
  4. I then create the node and immediately type in a string of text like “Hello, World”
  5. Finally, I check the logs for any execution logs but to no avail

Hopefully, this is what you were looking for?

I have also tried to vary my index.js to call a 2nd gen cloud function but I get even more errors…

Value of variable gets lost outside a try-catch statement in a react component

So I’m trying to display some math for a school project using react and MathJax and MathJs,
the code is the following:

const InputForm = () => {

    let latex;
    let node;
    let inicial;
//    MathJax.typesetClear();

    let parenthesis = 'keep'
    let implicit = 'hide'
    
    //'sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2'
    
    const [inputExpressionText, setInputExpressionText, ] = useState(initial);
    
    function initial(){
      node = math.parse('sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2')
      latex = node ? node.toTex({parenthesis: parenthesis, implicit: implicit}) : ''
      console.log('Node en estado inicial:', node)
      console.log('LaTeX en estado inicial:', latex)
      
      return 'sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2';
    }

    useEffect(() => {
      //OnInput();
    },[inputExpressionText,])

    
  
  
  

    

const OnInput = function () {
  
  console.log(inputExpressionText);
  inicial = document.getElementById("input")
  node = null;

  try {
    console.log("antes de node initial", inicial.value);
    console.log("antes de node", node);
    node = math.parse(inicial.value)
    console.log("después de node", node);
    
  }
  catch (err) {
    console.log("No entro a node = math",   )
    console.log(err.toString())
  }

  try {
    // export the expression to LaTeX
    latex = node ? node.toTex({parenthesis: parenthesis, implicit: implicit}) : ''
    console.log('LaTeX expression dentro de funcion:', latex)

    // display and re-render the expression
    
  }
  catch (err) {
  }
  console.log("lates en fuera del try-catch",latex)
}
  console.log("lates xfinal",latex)
  console.log("inputExpressionText ", inputExpressionText)
    return (
        <table className=' table  justify-content-between  '>
          <tbody>
              <tr>
                  <th>Expression</th>
                  <td><input type="text"  onInput={(e) =>{
                          setInputExpressionText(e.target.value);
                          OnInput()
                        }} id="input" value={inputExpressionText}/></td>
              </tr>
              <tr>
                  <th>Pretty print</th>
                  <td><PrettyInput latex={latex}/></td>
              </tr>
              <tr>
                  <th>Result</th>
                  <td><Result input={node} /></td>
              </tr>
          </tbody>
        </table>
    )
}

export default InputForm

the problem is in this part

try {
    // export the expression to LaTeX
    latex = node ? node.toTex({parenthesis: parenthesis, implicit: implicit}) : ''
    console.log('LaTeX expression inside function:', latex)

    // display and re-render the expression
    
  }
  catch (err) {
  }
  console.log("lates en fuera del try-catch",latex)
}
  console.log("lates xfinal",latex)

When latex variale gets the tex inside the function, the console.log('LaTeX expression inside function:', latex) confirms it, console shows the corresponding tex value.

But called again right outside the OnInput function, it shows undefined breaking the code.

I’ve tried to used the proposed example mathJs in here adapting it to a react component.

That approached worked only if added live while working with vite, but stopped working if reloaded as it says the dom it’s not loaded.

I’m really stuck

XML traversing relationships vs getElementsByTagName performance

I am using the below methods of traversing an XML doc, however, I’d like to stick with one, is this a case of preference? or which is technically more performant?

xmlDoc.Ticket.TicketEnd.Date vs xmlDoc.getElementsByTagName("Date")[0].textContent

<Root
    xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
    xmlns:urn="urn:asw:trs"
    xmlns:x="http://schemas.xmlsoap.org/soap/envelope/">
    <Ticket BU_Code="wer" BU_Key="4">
        <LoyaltyCustomer>
            <LastName> </LastName>
            <FirstName> </FirstName>
            <TrimmedCardNumber> </TrimmedCardNumber>
            <EncryptedCardNumberCW>@ ==</EncryptedCardNumberCW>
            <CardNumber> </CardNumber>
            <1/>
            <2/>
            <3/>
            <4/>
        </LoyaltyCustomer>
        <TicketEnd>
            <Date>03/01/2024</Date>

use js class on html elements

I am trying to assign a javascript class to a html div.

I already have another class on the div so im trying to just add a 2nd one and the same div but the js class is not working when I type it out on the class. so I am stuck

cURL request responds with result but nodejs request says “Enable javascript and cookies to continue”

I am making this cURL request below which responds with the right results from my terminal. However, the same url says “Enable Javascript and cookies to continue.” when using the curl in a VM, postman and nodejs request.

curl --location 'https://leetcode.com/contest/api/ranking/weekly-contest-388?pagination=1' 
--header 'Referer: https://leetcode.com/contest/weekly-contest-388/ranking/' 
--header 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36' 
--header 'DNT: 1'

Node.js request looks like below.

var request = require('request');

var headers = {
    'Referer': 'https://leetcode.com/contest/weekly-contest-388/ranking/',
    'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36',
    'DNT': '1'
};

var options = {
    url: 'https://leetcode.com/contest/api/ranking/weekly-contest-388?pagination=1',
    headers: headers
};

function callback(error, response, body) {
    if (!error && response.statusCode == 200) {
        console.log(body);
    }
}

request(options, callback);

I got this API from the contest ranking page on Leetcode. https://leetcode.com/contest/weekly-contest-388/ranking/

What am I missing or doing wrong? My main aim is to use it in node.js request and I used postman just to debug and better understand the API call.

HTML file and client side storage Javascript related question, is it possible?

new here.

I would like to make a very light and simple “webpage app” using an HTML file.
Inside of which, there is a Javascript code, so it can be easily shared by a simple copy/paste and the code could be checked by anyone who want by avoiding multiple initial files to download.

I don’t want any required dependencies or any other steps than just double click to launch it, just a single file that we can just easily run using any modern browsers, and easily check the code for people afraid of potential virus by just doing a right click/open with notepad(++).
At worse, a single external API for the first run, since it need to download data anyway for it to be visually usable.

To visualise what I want, it is a basic spreadlist style checklist using HTML’s table or simple CSS equivalent, but with images for each items and one for the background, main icons, etc, along with saving which items have been checked, and if possible, having multiple “save files” (text or ini) the user can save and load.

The goal is to display a web page from the HTML file, opened locally, and the first task would be to check if the required images are already downloaded (so they don’t need to be fetched through third party servers everytimes, which they would probably not like), plus saved user data to be loaded.
I would like to avoid IndexedDB API as I would prefer for the user to be able to swap browsers at will without losing data, but rather being able to even use it on another machine by doing something as simple as copying the html file + its folder.

But that’s where I run into a problem, either, I only find totally unrelated answers, or highly specific or just things about how to use third party stuff like APIs, which, for an offline, and single initial file thing wouldn’t work as I would like to.

HTML and its embeded Javascript doesn’t like at all to deal with client side storage apparently.
But most of those are about HTML fetched from a server, a regular internet webpage, what about from our own HTML file from ‘file://’ rather than ‘HTTP(s)’ ?
Would a locally launched HTML file’s Javascript allow to check for existing files/folders like a stand alone Javascript already allow, and download, read and write them ?
Or should I abandon the idea to use HTML file as a base ?

Note that this is my first time asking on here, I’ve read many answers but never needed to create an account to ask a question before.
I hope the question is correct.

Thanks in advance !

Tried many things such as “= require(‘fs’);” (both “var” and “const” variant inst in case) which obviously doesn’t work client side.

“= new ActiveXObject(“Scripting.FileSystemObject”);”
Along with multiple other answers around “FolderExists()” and “CreateTextFile()” which also are for server side or Javascript outside HTML environment.

“localStorage.setItem()” and “localStorage.getItem” are browser dependents and obviously “sessionStorage” won’t work here.
Same with anything that has to do with cache.

Vue frontend stopped working after migrating to https

My vue frontend stopped work after I enabled SSL certificates. Now when I restart docker container I see only error
I also know that the url requested is (right side of the pic) url
Despite the fact that it should be wss in URL instead of ws.
The main point is that I can’t control this websocket connection (I hadn’t define this particular websocket). I tried to disable live reloading in vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: "all",
    hot: false,
    liveReload: false,
  },
  chainWebpack: (config) => {
    config.resolve.symlinks(false)
  }
})

And saw similar problem in react: here

Nothing of this helped. I know exactly that my websocket server is available on wss://xxx/ws. What shall I do with this problem?

Cloud function not working in local emulator [Firebase]

I am learning about cloud functions, the function HelloWorld works in the emulator but the updateUserRoleCron is not working, when I use “run npm serve” in the console this happens, thank you in advance. enter image description here

Function:

 exports.updateUserRoleCron = functions.pubsub.schedule('every 24 hours').onRun(async (context) => {
  const thresholdTimestamp = Date.now() - (30 * 24 * 60 * 60 * 1000); // Hace 30 días
  const usersRef = admin.firestore().collection('users');

  try {
    const snapshot = await usersRef.where('role', '==', 'subscriber').where('lastUpdate', '<=', thresholdTimestamp).get();

    const batch = admin.firestore().batch();

    snapshot.forEach(doc => {
      batch.update(doc.ref, { role: 'normal' });
    });

    await batch.commit();

    console.log('Roles de usuarios actualizados correctamente');
  } catch (error) {
    console.error('Error al actualizar los roles de usuario:', error);
  }
});

ran npm serve to load cloud functions in local but an error shows up

Could not read from file C:UsersUsernameReactFinal Year Projectclientstream-browserify

enter image description here
Getting this error in my VsCode after changing an import line in a js file. I changed it from const ethSigUtil = require('eth-sig-util) to ‘import ‘eth-sig-util’ as it was giving me an error previously saying require is not defined.

I’m running vite and I’m importing this file in my client side in createNode.js while the file signer.js is in my backend. They’re both running tsconfig but these two files are both js files as I couldn’t work out the types.

root/client/src/eth/createNode.js
import { signMetaTransactionRequest } from '../../../backend/src/signer.js';

root/backend/src/signer.js
import * as ethSigUtil from 'eth-sig-util';

I’ve tried changing it to the line above but still the same error. On my actual localhost, the console is giving me this error with the get request being a 504. I’ve reinstalled node modules and everything but I don’t understand this error.
enter image description here

My package.json in client side has references to them

  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@hookform/resolvers": "^3.3.2",
    "@react-oauth/google": "^0.12.1",
    "@supabase/auth-ui-react": "^0.4.6",
    "@supabase/auth-ui-shared": "^0.1.8",
    "@supabase/supabase-js": "^2.38.5",
    "@types/react-router-dom": "^5.3.3",
    "browserify-zlib": "^0.2.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "dotenv": "^16.4.5",
    "ethers": "^6.11.1",
    "events": "^3.3.0",
    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-datepicker": "^4.23.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.48.2",
    "react-icons": "^4.11.0",
    "react-router-dom": "^6.18.0",
    "stream-browserify": "^3.0.0",
    "supabase": "^1.113.3",
    "util": "^0.12.5",
    "zod": "^3.22.4"
  },

My package.json in backend

  "dependencies": {
    "@chainlink/contracts": "^0.8.0",
    "@metamask/eth-sig-util": "^7.0.1",
    "@openzeppelin/contracts": "^5.0.1",
    "@openzeppelin/defender-relay-client": "^1.54.1",
    "@openzeppelin/defender-sdk": "^1.10.0",
    "crypto-browserify": "^3.12.0",
    "eth-sig-util": "^3.0.1",
    "ethers": "^6.11.1"
  }

I realise that eth-sig-util is deprecated but I still need it. I don’t quite understand why the first error image shows that it cant read from client/stream-browserify so maybe its a path issue.

If anyone can help, I would appreciate it. I’ve been stuck on this for an entire day.

Datatable edit cell using Flyter js

I am trying to use Flyter js to edit cells of a column in a datatable. but not sure how to add class to the datatable cell data: I need to edit ‘Label’ column.
If there is another easy way, would like to know to edit just single column of a datable and submit data to the server

Here is my html code:

<table id="tblProjectJobs" class="datatable">
<thead>
    <tr>
        <th>Job ID</th>
        <th>Stage</th>
        <th>Salary Date</th>
        <th>Date</th>
        <th>Label</th>
    </tr>
</thead>
</table>

Javascript code with datatable and flyter code:

<script>
$(document).ready(function()
{
    flyter.attach('.EditLabel',
{
    type: { name: 'text' },
    emptyValueDisplay: '',
    renderer:
    {
        name: 'inline'
    },
    validate: function(value, instance)
    {
        /* Validate the edited comment is not null / zero length */
        if (value == null)
        {
            $.notify(
            {
                title: 'An error occurred',
                text: 'You must provide a value for your comment when editing a comment.  If you wish to delete the comment, please use the Delete button.',
                image: '<i class="fa fa-2x fa-check"></i>'
            },
            {
                style: 'cosentino',
                className: 'error',
                position: 'bottom right'
            });

            return false;
        }
        else
        {
            return true;
        }
    }

    var objTable = $("##tblProjectJobs").DataTable(
    {
        
        "columns":
        [
        { data: 'JOBID'},
        { data: 'STAGEDESCRIPTION'},
        {
            data: 'SALARYDATE',
            render: function(data, type, row)
            {
                if (data.length > 0)
                {
                    return moment(data, "MMMM, DD YYYY HH:mm:ss").format("MM/DD/YYYY");
                }
                else
                {
                    return "";
                }
            }
        },
        { data: 'DATE'},
        { data: 'LABEL'},
        
});

Codeigniter Downlaod Helper not working for Zip files

I am trying to download a file saved in the server and allow the user to extract it from the front end based on the date selected. The application is built using the codeigniter framework.
I am currently using the download helper from codeigniter and it works perfectly when downloading csv files, but the zip file seems to be corrupted always. One thing I notice is that original zip is 101kb in size but the downloaded zip file is 182kb. I have checked the mime type, make sure the output buffer is cleared before sending data but I can’t figure out the issue. I would greatly appreciate to hear your opinion.

enter image description here

API CALL:

    private function download_get_archive( $year, $month, $day, $type)
    {
        $date = DateTime::createFromFormat(
            'Y-m-d H:i:s', "{$year}-{$month}-{$day} 00:00:00", new DateTimeZone( 'America/New_York' )
        );

        $archive_file = implode( DIRECTORY_SEPARATOR, [
            rtrim( $this->config->item( 'archive_dir' ), '\/' ),
            $date->format( 'Y' ),
            $date->format( 'm' ),
            $date->format( 'd' ),
            'profiles' . ($type === 'legacy' ? '.csv' : '.zip') 
        ] );

        if( !file_exists( $archive_file ) ) {
            log_message( 'error',
                __METHOD__ . ": Could not find '{$archive_file}'"
            );

            $this->output->set_status_header( 404 );
            return;
        }

        $this->load->helper( 'download' );

        header( 'Access-Control-Allow-Origin: *' );
        header( 'Access-Control-Allow-Headers: Content-Type' );
        force_download( $archive_file, null, true );
    }

download_helper.php:

    function force_download($filename = '', $data = '', $set_mime = FALSE)
    {
        if ($filename === '' OR $data === '')
        {
            return;
        }
        elseif ($data === NULL)
        {
            if ( ! @is_file($filename) OR ($filesize = @filesize($filename)) === FALSE)
            {
                return;
            }

            $filepath = $filename;
            $filename = explode('/', str_replace(DIRECTORY_SEPARATOR, '/', $filename));
            $filename = end($filename);
        }
        else
        {
            $filesize = strlen($data);
        }

        // Set the default MIME type to send
        $mime = 'application/octet-stream';

        $x = explode('.', $filename);
        $extension = end($x);

        if ($set_mime === TRUE)
        {
            if (count($x) === 1 OR $extension === '')
            {
                /* If we're going to detect the MIME type,
                 * we'll need a file extension.
                 */
                return;
            }

            // Load the mime types
            $mimes =& get_mimes();

            // Only change the default MIME if we can find one
            if (isset($mimes[$extension])) {
                if ($extension === 'zip') {
                    // Use the second element of the array, which is 'application/zip'
                    $mime = is_array($mimes[$extension]) ? $mimes[$extension][1] : $mimes[$extension];
                } else {
                    $mime = is_array($mimes[$extension]) ? $mimes[$extension][0] : $mimes[$extension];
                }
            }
        }

        /* It was reported that browsers on Android 2.1 (and possibly older as well)
         * need to have the filename extension upper-cased in order to be able to
         * download it.
         *
         * Reference: http://digiblog.de/2011/04/19/android-and-the-download-file-headers/
         */
        if (count($x) !== 1 && isset($_SERVER['HTTP_USER_AGENT']) && preg_match('/Androids(1|2.[01])/', $_SERVER['HTTP_USER_AGENT']))
        {
            $x[count($x) - 1] = strtoupper($extension);
            $filename = implode('.', $x);
        }

        if ($data === NULL && ($fp = @fopen($filepath, 'rb')) === FALSE)
        {
            return;
        }

        // Clean output buffer
        if (ob_get_level() !== 0 && @ob_end_clean() === FALSE)
        {
            @ob_clean();
        }
        // Generate the server headers

        header('Content-Type: '. $mime);
        header('Content-Disposition: attachment; filename="'.$filename.'"');
        header('Expires: 0');
        header('Content-Transfer-Encoding: binary');
        header('Content-Length: '.$filesize);
        header('Cache-Control: private, no-transform, no-store, must-revalidate');

        // If we have raw data - just dump it
        if ($data !== NULL)
        {
            exit($data);
        }
        // Flush 1MB chunks of data
        while ( ! feof($fp) && ($data = fread($fp, 1048576)) !== FALSE)
        {
            echo $data;
        }

        fclose($fp);
        exit;
    }
}

Note: The reason I am using $mimes$extension fro zip files is because $mimes[$extension][0] translates to x-zip and I wanted to keep the mime as accurate as possible. Additionally, here is the response string I receive as a result of the API call:

enter image description here

Frontend Export.js:

    const handleMenusExportDaypart = type => {
        message.info('Export started')

        let exportDate = date.split('-')
        exportDate.push('daypart')

        menusApi.exportMenus(exportDate).then(
            response => {
                fileDownload(response, `${date}.zip`)
            },
            error => {
                notification.error({ message: 'Error', description: getErrorMessage(error) })
            }
        )
    }

The response I get is a binary string I believe and part of me believes that it is the way I am handling data in the frontend that is causing problems since the response seems accurate. In the frontend I am using the fileDownload function from ‘js-file-download’ library:

declare module 'js-file-download' {
    export default function fileDownload(
        data: string | ArrayBuffer | ArrayBufferView | Blob,
        filename: string,
        mime?: string,
        bom?: string
    ): void;
}

The original zip file I am trying to download unzips perfectly, contains the contents correctly, but the zip file that is being downloaded is corrupted. I have tried switching browsers to see wether if it was a browser related issue but that didn’t seem to help either. Please let me know your opinion, I really appreciate your time.
enter image description here