3

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;
}

4
  • 1
    Prueba agregando <option value="" ></option> vacíos para dar un tamaña al <select>, cuando terminen de cárgalos los otros items display: none.a los options vacios
    – Diego Mesa
    el 20 jul. 2019 a las 8:33
  • 1
    Hola, tal vez puedas resolver tu problema quitando el async en la linea async 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. el 20 jul. 2019 a las 13:36
  • 1
    Puedes hacer-lo disabled dentro de tú function async, hasta que el await reciba los datos, no habilitar-lo..(?) el 21 jul. 2019 a las 13:35
  • El problema en la opción de Diego Mesa es que no sé la cantidad de <options> que me hacen falta. Las otras dos soluciones se me quedaban cortas al tener también que actualiazarse tras modificar o crear comentarios.
    – BigfooTsp
    el 4 ago. 2019 a las 15:48

1 respuesta 1

0

Al final a este problema concreto le encontré esta solución:

En la aplicación, para ver comentarios se abre un modal que contiene un formulario con:

  • Un elemento <select> que contiene la lista de los comentarios del usuario.
  • Dos <textbox> para el texto y los tags.
  • Un div con botones para editar y eliminar el comentario.

Utilizo un helper de handlebars para que me genere el contenido del <select> obteniendo todos los comentarios de la base de datos. Esto me sirve para que con la carga inicial del modal se muestre la lista de comentarios actualizada.

/** Devuelve plantilla de <options> para un <select> con lista de comentarios */
helpers.refreshCommentList = async (authorid, loginusername, loginusertype) => {
  // Solicitando actualizacion de datos al servidor.
  const resp = await query.getComments(authorid);

  if (resp.status == '200') {
    const comments = await resp.json();
    let template = '<option selected value="">Selecciona comentario del menú</option>';

    // Generando plantilla actualizada para el selector de comentarios
    comments.forEach((element) => {
      template += `
      <option name="comment-selected" value='
      {
        "loginusername": "${loginusername}"
        "loginusertype": "${loginusertype}"
        "authorid": "${authorid}",            ///TODO
        "authorname": "${element.user}",
        "commentid": "${element._id}",
        "date": "${helpers.pretiffyDate(element.date)}",
        "text": "${element.text}",
        "tags": "${element.tags}",
      }'>
        ${helpers.pretiffyDate(element.date)} - ${element.user}
        </option>`;
    });

    return template;
  }
};

Pero...

Desde el mismo modal se accede a unos botones para editar o eliminar el comentario. Si se realiza algún cambio, la lista se queda obsoleta aunque se cerrase y abriese el modal de nuevo.

Para solucionar esto...

En el script.js del lado del cliente pongo la misma función que en el helper y, después de hacer un $form.reset(), la llamo para actualizar el contenido del <select> cada vez que se crea, edita o elimina un comentario.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.