Me encuentro con el siguiente problema:
Tengo un elemento <select>
que debe de mostrar una lista de comentarios que contiene un item en la base de datos.
Un evento click realiza una consulta en la base de datos y actualiza el contenido del elemento <select>
, pero despliega la lista antes de que el contenido se actualice y debo de realizar un segundo click para que ya muestre el contenido actualizado.
Lo que quisiera es que la lista se desplegase actualizada desde el primer click.
También tengo el problema de que el contenido se actualiza en el click inicial que despliega la lista así como en el click que selecciona la opción... y este último sobra.
Tengo lo siguiente...
El elemento <select>
dentro de la vista.
<select class="custom-select" name="read-selector-comment" id="read-selector-comment" data-userid="{{_id}}">
<option selected>Selecciona comentario del menú</option>
</select>
Los siguientes listeners se activan tras cargar la página
// Eventos que controlan la selección y visión de comentarios
const $UserCommentsSelectorTab = document.getElementById(
'read-selector-comment',
);
if ($UserCommentsSelectorTab) {
// Actualiza items de la lista a cada click
$UserCommentsSelectorTab.addEventListener('click', refreshCommentsList);
// Mustra contenido selecionado
$UserCommentsSelectorTab.addEventListener('change', viewComment);
}
Un evento click sobre el elemento ejecuta la siguiente función que realiza una búsqueda en la base de datos y con el resultado introduce los elementos <option>
en <select>
async function refreshCommentsList(event) {
const $commentList = event.currentTarget;
// Solicitando actualizacion de datos al servidor.
const r = await fetch(`/user/comments/${$commentList.dataset.userid}`, {
headers: new Headers(),
method: 'POST',
});
if (r.ok) {
const resp = await r.json();
let template = '<option selected>Selecciona comentario del menú</option>';
// Generando plantilla actualizada para el selector de comentarios
resp.forEach((element) => {
template += `<option name="comment-selected" value='{"text": "${element.text}",
"tags": "${element.tags}",
"user": "${element.user}",
"date": "${pretiffyDate(element.date)}"
}'"> ${pretiffyDate(element.date)} - ${element.user}}</option>`;
});
// Añade los elementos actualizados
$commentList.innerHTML = template;
} else {
swal('Error', 'Error al actualizar comentarios', 'error');
}
}
El evento change sobre el elemento <select>
actualiza otros elementos de la vista mostrando la información.
/** Muestra el comentario seleccionado */
function viewComment(event) {
const $title_box = document.getElementById('comment-title');
const $text_box = document.getElementById('text-comment-box');
const $tags_box = document.getElementById('tags-comment-box');
const comment = JSON.parse(event.currentTarget.value);
// Título
$title_box.innerText = `${comment.date} - ${comment.user}`;
// Texto
$text_box.innerText = comment.text;
// Tags
const tags = comment.tags.split(',');
let tagsTemplate = '';
tags.forEach((element) => {
tagsTemplate += `<span class="badge badge-success m-2">${element}</span> `;
});
$tags_box.innerHTML = tagsTemplate;
}
<option value="" ></option>
vacíos para dar un tamaña al<select>
, cuando terminen de cárgalos los otros itemsdisplay: none
.a los options vaciosasync
en la lineaasync function refreshCommentsList(event) {
, de esa forma el código se va a ejecutar de manera secuencial y no de forma concurrente como lo hace ahora de modo que esperará a recibir el resultado antes de mostrarse.