0

I'm creating a Accounting Web System using Nodejs and Express with Handlebars (.hbs), while using Bootstrap as my main Frontend toolkit. I have a dynamic table with each row consisting of information and three buttons. With delete button ("eliminar"), I'm adding a modal to verify that the user actually wants to delete information instead of by accident.

However, when inserting the modal into my handlebar, the information no longer belongs to its appropriate row but rather the first row from the query object rendered into the handlebar. My code looks like this:

<table class="table table-bordered">
  <thead class="thead-dark text-center">
    <tr>
      <th scope="col">Tipo ID</th>
      <th scope="col">Tipo Codigo</th>
      <th scope="col">Tipo Descripcion</th>
      <th scope="col">Acciones</th>
      <th scope="col">Usuario</th>
      {{!-- <th scope="col">Tiempo Creado:</th> --}}
    </tr>
  </thead>
  <tbody class="text-center">
    {{#each tipoparametro}}
    <tr>
      <th scope="row">{{this.tipoparid}}</th>
      <td>{{this.tipoparcodigo}}</td>
      <td>{{this.tipodescripcion}}</td>
      <td class="text-center">
        <a href="/viewuser/{{this.tipoparid}}" type="button" class="btn btn-outline-info btn-small"><i
            class="bi bi-eye"></i>Ver</a>
        <a href="/edituser/{{this.tipoparid}}" type="button" class="btn btn-outline-primary btn-small"><i
            class="bi bi-pencil"></i>Modificar</a>
        <a href="/delete/{{this.tipoparid}}" type="button" class="btn btn-outline-danger btn-small"
          value={{this.tipoparid}} data-bs-toggle="modal" data-bs-target="#staticBackdrop"
          data-target={{this.tipoparid}}><i class="bi bi-person-x"></i>Eliminar - {{this.tipoparid}}</a>
      </td>

      {{!-- New --}}
      <!-- Modal -->
      <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true" value={{this.tipoparid}}>
        <div class="modal-dialog text-center">
          <div class="modal-content">
            <div class="modal-header text-center">
              <h5 class="modal-title w-100" id="staticBackdropLabel">Eliminar
              </h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body ">
              Estas seguro que quieres eliminar este Tipo Parametro:
              <hr>
              <p class="card-text"><strong>Id:</strong> {{this.tipoparid}}</p>
              <p class="card-text"><strong>Codigo de Parametro:</strong> {{this.tipoparcodigo}}</p>
              <p class="card-text"><strong>Usuario:</strong> {{this.usuarionombre}}</p>
              <p class="card-text"><strong>Descripcion:</strong> {{this.tipodescripcion}}</p>
            </div>
            <div class="modal-footer d-flex justify-content-between">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
              <a type="button" class="btn btn-outline-danger yes" href="/delete/{{this.tipoparid}}">Eliminar</a>
            </div>
          </div>
        </div>
      </div>
      {{!-- New --}}

      <td>{{this.usuarionombre}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

Is there a simplified way to pass the unique identifier this.tipoparid into the modal so I can obtain the correct info from each row and not from the first all the time?

It's important for me to output the information inside the modal according to its row.

Marlon Miller
  • 13
  • 2
  • This doesn't work because you are re-using the element id each time you render the modal HTML - which is once per row. I would recommend dynamically building the modal body upon button click using some JavaScript. See: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content – 76484 Jul 12 '22 at 10:48
  • I saw the bootstrap page and decided to replicate the same modal example with the jquery. However, I'm new with jquery so I downloaded the npm jquery and, on a top – Marlon Miller Jul 12 '22 at 22:57
  • I am trying to avoid getting too deep into a complicated solution. The quickest thing for you to do would be to make sure you have a unique id for each modal you are creating. You could do `staticBackdrop{{@index}}` for each data-bs-target and modal ID and that should work. – 76484 Jul 12 '22 at 23:51
  • 1
    Thank you so much! You were right, it was easier than I thought. Static drop needed to have a unique id. Appreciate it! – Marlon Miller Jul 14 '22 at 17:36

0 Answers0