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 © 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