0

La pagina trae registros segun la fecha que selecione en la pagina, la 1era vez tenga datos o no funciona bien pero cuando vuelvo a seleccionar otra fecha ya me devueleve el error: Error al cargar los datos de transacción: TypeError: document.querySelector(...) is null

esto es lo que imprime en consola:

**

23:25:37.597 Elemento seleccionado al principio: 
<tbody>
transaction.js:25:28
23:25:37.763
XHRGET
http://localhost:8080/transaction?selectedDate=2023-09-15
[HTTP/1.1 204  1539ms]

23:25:39.308 La lista de transacciones está vacía. transaction.js:54:29
23:25:39.308 Intentando seleccionar el elemento... transaction.js:62:20
23:25:39.309 Elemento seleccionado: 
<tbody>
transaction.js:64:20
23:25:39.310 Contador: 0 transaction.js:65:20
23:25:39.310 Código de estado de la respuesta: 204 transaction.js:68:18
23:25:39.310 Código transactiondataDataList: 
Array []
transaction.js:69:18
23:25:39.311 La respuesta fue un 204, la lista está vacía. transaction.js:101:25
23:25:48.096 2023-09-04 transaction.js:21:17
23:25:48.097 Intentando seleccionar el elemento al principio... transaction.js:23:28
23:25:48.097 Elemento seleccionado al principio: null transaction.js:25:28
23:25:48.101
XHRGET
http://localhost:8080/transaction?selectedDate=2023-09-04
[HTTP/1.1 200  703ms]

23:25:48.810 Intentando seleccionar el elemento... transaction.js:62:20
23:25:48.811 Elemento seleccionado: null transaction.js:64:20
23:25:48.811 Contador: 1 transaction.js:65:20
23:25:48.812 Código de estado de la respuesta: 0 transaction.js:68:18
23:25:48.812 Código transactiondataDataList: 
Array(3) [ {…}, {…}, {…} ]
transaction.js:69:18
23:25:48.816
Error al cargar los datos de transacción: TypeError: document.querySelector(...) is null
    cargarExternalData http://localhost:8080/js/transaction.js:103
    promise callback*cargarExternalData http://localhost:8080/js/transaction.js:61
    <anonymous> http://localhost:8080/js/transaction.js:27

**

Codigo HTML:

let contador= 0;

$(document).ready(function() {
$('#transactiondata').DataTable();

    // Obtén la fecha actual en formato YYYY-MM-DD
    const fechaHoy = new Date().toISOString().split('T')[0];

    // Obtén una referencia al elemento de entrada de fecha por su ID
    const fechaSeleccionada = document.getElementById('fechaSeleccionada');

    // Establece la fecha de hoy como el valor predeterminado del campo de entrada
    fechaSeleccionada.value = fechaHoy;

     console.log('Contador antes opencalendar click:', contador);

    $('#openCalendarButton').on('click', function() {
        // Aquí puedes abrir el calendario y permitir al usuario seleccionar una fecha
        // Supongamos que la fecha seleccionada se almacena en una variable llamada "selectedDate"
        const selectedDate = obtenerFechaSeleccionada();
        console.log(selectedDate);
        if (selectedDate) {
                   console.log('Intentando seleccionar el elemento al principio...');
                   const elementoSeleccionado = document.querySelector('#transactiondata tbody');
                   console.log('Elemento seleccionado al principio:', elementoSeleccionado);
            // Si se selecciona una fecha, llama a la función para cargar los datos
            cargarExternalData(selectedDate);
        }
    });
});


function cargarExternalData(selectedDate) {



    // Aquí puedes usar la variable "selectedDate" para hacer la solicitud a la API
    const headers = getHeaders();
    const url = '/transaction?selectedDate=' + selectedDate;
    let status =0;

    fetch(url, {
        method: 'GET',
        headers: headers
    })
    .then(response => {
        if (!response.ok) {
            // Si la respuesta no es exitosa, manejar el error aquí
            console.error('Error en la respuesta de la API:', response.statusText);
            return Promise.reject('Error en la respuesta de la API');
        }
         if (response.status === 204) {
                    // Si la respuesta es un 204, la lista está vacía
                    console.log('La lista de transacciones está vacía.');
                    status =response.status;
                    return []; // Devolver una lista vacía
                }

        return response.json(); // Devuelve los datos JSON solo si la respuesta es exitosa
    })
    .then(transactiondataDataList => {
           console.log('Intentando seleccionar el elemento...');
           const elementoSeleccionado = document.querySelector('#transactiondata tbody');
           console.log('Elemento seleccionado:', elementoSeleccionado);
           console.log('Contador:', contador);
           contador = contador + 1;

         console.log('Código de estado de la respuesta:', status);
         console.log('Código transactiondataDataList:', transactiondataDataList);
         let listadoHtml = '';
         if (status !== 204) {
             if (!transactiondataDataList || transactiondataDataList.length === 0) {
                    // Si la lista está vacía, puedes realizar alguna acción o mostrar un mensaje
                     let transactionDataHtml ='<tr>' + '<td>' + '</td>' + '</tr>';
                     listadoHtml += transactionDataHtml;
                    console.log('La lista de transacciones está vacía.');
                } else {

            for (let transactiondata of transactiondataDataList) {
                let transactionDataHtml =
                    '<tr>' +
                    '<td>' + transactiondata.date + '</td>' +
                    '<td>' + transactiondata.dateUtc + '</td>' +
                    '<td>' + transactiondata.openDateUtc + '</td>' +
                    '<td>' + transactiondata.instrumentName + '</td>' +
                    '<td>' + transactiondata.period + '</td>' +
                    '<td>' + transactiondata.profitAndLoss + '</td>' +
                    '<td>' + transactiondata.transactionType + '</td>' +
                    '<td>' + transactiondata.reference + '</td>' +
                    '<td>' + transactiondata.openLevel + '</td>' +
                    '<td>' + transactiondata.closeLevel + '</td>' +
                    '<td>' + transactiondata.size + '</td>' +
                    '<td>' + transactiondata.currency + '</td>' +
                    '<td>' + transactiondata.cashTransaction + '</td>' +
                    '</tr>';
                listadoHtml += transactionDataHtml;
            }

                }
            } else {
                console.log('La respuesta fue un 204, la lista está vacía.');
            }
            document.querySelector('#transactiondata tbody').outerHTML = listadoHtml;

    })
    .catch(error => {
        console.error('Error al cargar los datos de transacción:', error);
    });
}



function obtenerFechaSeleccionada() {
    // Obtener el valor del elemento de entrada de fecha
    const fechaSeleccionada = document.getElementById('fechaSeleccionada').value;

    // Asegurarse de que se haya seleccionado una fecha válida
    if (fechaSeleccionada) {
        return fechaSeleccionada;
    } else {
        alert('Por favor, selecciona una fecha válida.');
        return null; // Devuelve null si no se selecciona una fecha
    }
}
function getHeaders() {
    return {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': localStorage.token
    };
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>DESDE STATIC</title>

    <!-- Custom fonts for this template -->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
            href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
            rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

    <!-- Custom styles for this page -->
    <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">

</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Sidebar -->
    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

        <!-- Sidebar - Brand -->
        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
            <div class="sidebar-brand-icon rotate-n-15">
                <i class="fas fa-laugh-wink"></i>
            </div>
            <div class="sidebar-brand-text mx-3">Users System <sup>2</sup></div>
        </a>


        <!-- Nav Item - Tables -->
        <li class="nav-item active">
            <a class="nav-link" href="tables.html">
                <i class="fas fa-fw fa-table"></i>
                <span>IG API RESOLUTION</span></a>
        </li>

        <!-- Divider -->
        <hr class="sidebar-divider d-none d-md-block">

        <!-- Sidebar Toggler (Sidebar) -->
        <div class="text-center d-none d-md-inline">
            <button class="rounded-circle border-0" id="sidebarToggle"></button>
        </div>

    </ul>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                <!-- Sidebar Toggle (Topbar) -->
                <form class="form-inline">
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars"></i>
                    </button>
                </form>

                <!-- Topbar Navbar -->
                <ul class="navbar-nav ml-auto">



                    <div class="topbar-divider d-none d-sm-block"></div>

                    <!-- Nav Item - User Information -->
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="mr-2 d-none d-lg-inline text-gray-600 small" id="txt-email-usuario">...</span>
                            <img class="img-profile rounded-circle"
                                 src="img/undraw_profile.svg">
                        </a>
                        <!-- Dropdown - User Information -->
                        <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                             aria-labelledby="userDropdown">
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                Profile
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                                Settings
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
                                Activity Log
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                Logout
                            </a>
                        </div>
                    </li>

                </ul>

            </nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">

                <!-- Page Heading -->
                <h1 class="h3 mb-2 text-gray-800">Gestión de Usuarios</h1>
                <input type="date" id="fechaSeleccionada" value="2018-07-22" min="2018-01-01"  />
                <!-- Botón para obtener la fecha seleccionada -->
                <button id="openCalendarButton">Obtener Fecha Seleccionada</button>

                <!-- DataTales Example -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Listado de Usuarios</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="transactiondata" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre Completo</th>
                                    <th>Email</th>
                                    <th>Teléfono</th>
                                    <th>Acciones</th>
                                </tr>
                                </thead>
                                <tbody>
                                <h1 th:text="${mensaje.contenido}"></h1>
                                <!-- Agrega un botón para abrir el calendario -->

                                <p>Datos de la API:</p>

            <!--                    <tr th:each="item : ${externalDataList}">
                                    <td th:text="${item.AccountId}"></td>
                                    <td th:text="${item.balance}"> </td>
                                    <td th:text="${item.balance}"> </td>
                                </tr>
-->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        <footer class="sticky-footer bg-white">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>Copyright &copy; Your Website 2020</span>
                </div>
            </div>
        </footer>
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="login.html">Logout</a>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>

<!-- Page level custom scripts -->
<script src="js/transaction.js"></script>
</body>

</html>

No veo porque se pierde document.querySelector('#transactiondata tbody').outerHTML = listadoHtml; En la segunda llamada al calenderario se pasa la fecha de forma correcta se dirige al controlador y al servicio devolviendo datos pero no se pintan en la pagina

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.