Search code examples
javascriptphpbootstrap-modal

using a Modal to view data in @foreach loop

I would like to show data in a Modal by the ID, but the Modal always shows the same data. It does not matter the row I click, it shows always data from the same row. I don´t know why it is not passing the correct data.

This is the code.

<table class="table table-bordered table-hover table-striped"id="mitabla" border="1">
  <thead>
    <tr>
      <th class="text-center" style="width: 40px;">#</th>
      <th><p>Marcar</p><input type="checkbox" id="casilla"></th>
      <th>Host Name </th>
      <th>Nº de Serie </th>
      <th>Modelo</th> 
      <th>Cargador</th>
      <th>Maletín</th>
      <th>Docking</th>
      <th>Ratón / Teclado</th>
      <th>Observaciones</th>
      <th>Usuario</th>
      <th class="text-center" style="width: 100px;">Acciones</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <?php foreach($all_informatica as $infor): ?>
        <td class="text-center"><?php echo (int)$infor['id'];?></td>
        <td><input type="checkbox" class="casilla" name="casilla[]" value="<?php echo $infor['id'];?>"></td>
        <td><?php echo remove_junk(ucwords($infor['hostName']))?></td>
        <td><?php echo remove_junk(ucwords($infor['nSerie']))?></td>
        <td><?php echo remove_junk(ucwords($infor['modelo']))?></td>
        <td><?php echo remove_junk(ucwords($infor['cargador']))?></td>
        <td><?php echo remove_junk(ucwords($infor['maletin']))?></td>
        <td><?php echo remove_junk(ucwords($infor['docking']))?></td>
        <td><?php echo remove_junk(ucwords($infor['ratonTeclado']))?></td>
        <td><?php echo remove_junk(ucwords($infor['notas']))?></td>
        <td>
          <select class="form-control" name="usuario" disabled>
            <option value="">Usuarios</option>
            <?php  foreach ($all_users as $users): ?>
              <option value="<?php echo (int)$users['id']; ?>" <?php if($infor['user_id'] === $users['id']): echo "selected"; endif; ?> >
                <?php echo remove_junk($users['name']); ?></option>
            <?php endforeach; ?>
          </select>
        </td>
        <td class="text-center">
          <div class="btn-group">
            <button type="button" class="btn btn-xs btn-primary btn-view" id="viewID" name="viewID" data-toggle="modal" data-target="#modal-ver" value="<?php echo $infor['id'];?>" title="Ver">
              <i class="glyphicon glyphicon-eye-open"></i>
            </button>
            <a href="edit_informatica.php?id=<?php echo (int)$infor['id'];?>" class="btn btn-xs btn-warning" data-toggle="tooltip" title="Editar">
              <i class="glyphicon glyphicon-pencil"></i>
            </a>
            <a href="#" data-href="delete_informatica.php?id=<?php echo (int)$infor['id'];?>" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#confirm-delete" title="Eliminar">
              <i class="glyphicon glyphicon-remove"></i>
            </a>
          </div>
        </td>
      <?php endforeach;?>
    </tr>
  </tbody>
</table>
</form>
<div class="pull-left">
  <a href="export_informatica.php" class="btn btn-danger" target="_blank">Exportar PDF</a>
</div>
        
<!-- modal -->
<?php foreach($all_informatica as $infor): ?>       
  <div class="modal fade" id="modal-ver" >   
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">  
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Informacion del equipo</h4>
        </div>
        <div class="modal-body" id="nombre">
          <div class="row">
            <div class="col-xs-12">
              <h2><strong>Host Name portátil : </strong> <?php echo $infor['hostName']; ?> </h2>
              <table class="table table-bordered">
                <tbody> 
                  <tr>       
                    <th style="background-color: #f4f4f4;">Host Name</th>
                    <td><?php echo $infor['hostName']; ?></td>
                    <th style="background-color: #f4f4f4;">Nº de Serie</th>
                    <td><?php echo $infor['nSerie']; ?></td>
                  </tr>
                  <tr>
                    <th style="background-color: #f4f4f4;">Modelo</th>
                    <td><?php echo $infor['modelo']; ?></td>
                    <th style="background-color: #f4f4f4;">Cargador</th>
                    <td><?php echo $infor['cargador']; ?></td>
                  </tr>
                  <tr>
                    <th style="background-color: #f4f4f4;">Maletín</th>
                    <td><?php echo $infor['maletin']; ?></td>
                    <th style="background-color: #f4f4f4;">Docking</th>
                    <td><?php echo $infor['docking']; ?></td>
                  </tr>
                  <tr>
                    <th style="background-color: #f4f4f4;">Ratón / Teclado</th>
                    <td><?php echo $infor['ratonTeclado']; ?></td>
                    <th style="background-color: #f4f4f4;">Observaciones</th>
                    <td><?php echo $infor['notas']; ?></td>
                  </tr>
                  <tr>
                    <th style="background-color: #f4f4f4;">Usuario</th>
                    <td>
                      <select class="form-control" name="usuario">
                        <option value="">Usuarios</option>
                        <?php  foreach ($all_users as $users): ?>
                          <option value="<?php echo (int)$users['id']; ?>" <?php if($infor['user_id'] === $users['id']): echo "selected"; endif; ?> >
                            <?php echo remove_junk($users['name']); ?>
                          </option>
                        <?php endforeach; ?>
                      </select>
                    </td>
                  </tr>
                </tbody>
              </table> 
            </div>
          </div>
        </div>      
        <div class="modal-footer">
          <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-primary btn-print" onclick="javascript:imprSelec('nombre')" ><span class="fa fa-print"> </span>Imprimir</button>
        </div>
      <!-- /.modal-content -->
      </div>
     <!-- /.modal-dialog -->   
    </div>
    <!-- /.modal-default -->
  </div>
<?php endforeach; ?>

I have tried different things, but I always have the same result. Same data every time in the Modal.

Solution

  • That's because you are generating multiple modal dialogs with the same ID (modal-ver) inside your loop. ID must be unique.

    So you need to append a new ID on each infor item every interaction.

    <!-- Remove the modal code inside the loop -->
<!-- modal -->
<div class="modal fade" id="modal-ver">
  <!-- Modal content here -->
</div>
<!-- End of modal -->

<table class="table table-bordered table-hover table-striped" id="mitabla" border="1">
  <!-- Table content here -->
</table>

<!-- Generate a unique modal for each infor item -->
<?php foreach($all_informatica as $infor): ?>
  <div class="modal fade" id="modal-ver-<?php echo $infor['id']; ?>">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Informacion del equipo</h4>
        </div>
        <div class="modal-body" id="nombre">
          <div class="row">
            <div class="col-xs-12">
              <!-- Modal content here -->
              <h2><strong>Host Name portátil : </strong><?php echo $infor['hostName']; ?></h2>
              <table class="table table-bordered">
                <tbody>
                  <!-- Table content here -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-primary btn-print" onclick="javascript:imprSelec('nombre')">
            <span class="fa fa-print"></span> Imprimir
          </button>
        </div>
      </div>
    </div>
  </div>
<?php endforeach; ?>

<!-- Update the button to target the specific modal using the unique ID -->
<?php foreach($all_informatica as $infor): ?>
  <button type="button" class="btn btn-xs btn-primary btn-view" data-toggle="modal" data-target="#modal-ver-<?php echo $infor['id']; ?>" title="Ver">
    <i class="glyphicon glyphicon-eye-open"></i>
  </button>
<?php endforeach; ?>

    With this each modal will have a unique ID based of the infor item. Every times the loops runs the ID will be different form the previous.

    Then you need to update the button. So that you are trigger the right item with help of the ID.

    <button type="button" class="btn btn-xs btn-primary btn-view" data-toggle="modal" data-target="#modal-ver-<?php echo $infor['id']; ?>" title="Ver">
  <i class="glyphicon glyphicon-eye-open"></i>
</button>

    With -<?php echo $infor['id']; ?> to the data-target attribute the button will associate with that specific modal with that infor item.