Modal of bootstrap does not show its corresponding content using CodeIgniter

1

Situation:

I have the following view in CodeIgniter that shows a table with users, one of the fields of each user is the "Edit" option, which when clicked on it opens a modal in which the user fields can be modified , but in this case, to simplify, it shows the name of the corresponding user:

<table class="table table-striped">
    <thead>
    <tr>
        <th>Id</th>
        <th>Nick</th>
        <th>Nombre</th>
        <th>Apellidos</th>
        <th>Correo</th>
        <th>Fecha de registro</th>
        <th>Estado</th>
        <th>Acciones</th>
    </tr>
    </thead>
    <tbody>

    <?php
    foreach ($users as $usr) { //Comienzo del foreach
    ?>

        <tr>
            <td>
                <?php echo $usr['id']; ?>
            </td>
            <td>
                <?php echo $usr['nick']; ?>
            </td>
            <td>
                <?php echo $usr['nombre'] ?>
            </td>
            <td>
                <?php echo $usr['apellidos'] ?>
            </td>
            <td>
                <?php echo $usr['email'] ?>
            </td>
            <td>
                <?php echo date_format(new DateTime($usr['fecha_registro']), 'd/m/Y'); ?>
            </td>
            <td>
                <?php echo botonEstado($usr['estado']); ?>
            </td>
            <td>
                <div class="btn-group">
                    <a class="btn btn-sm btn-info" title="Editar" data-toggle="modal" data-target="#modalEdit"><span class="glyphicon glyphicon-pencil"></span></a>
                    <div id="modalEdit" class="modal fade">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">Editando los campos de <?php echo  $usr['nick']; ?></h4>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
            </td>
        </tr>
    <?php } ?><!-- Aquí termina el foreach -->
    </tbody>
</table>

Problem:

All the data in the table is displayed in the expected way, however, when clicking on "Edit" it always shows me the name of the same user (the first of the loop)

What could be going wrong?

    
asked by Hechi 12.08.2016 в 14:11
source

2 answers

2

The problem is the id, in the dataTarget attribute you are using an id selector, in this case #modalEdit :

<a class="btn btn-sm btn-info" title="Editar" data-toggle="modal" data-target="#modalEdit">

Consequently, the same modality will always be shown, the first one, since only an element with said id can (must) be in the whole document:

<div id="modalEdit" class="modal fade">

Quick solution:

Add as suffix to the id of the element, the id of the user, and also to the selector in data-target, something like this:

<a class="btn btn-sm btn-info" title="Editar" data-target="#modalEdit<?php echo $usr['id']; ?>" data-toggle="modal" >

<div id="modalEdit<?php echo $usr['id']; ?>" class="modal fade">
    
answered by 12.08.2016 / 15:32
source
0

I'm not sure it's the problem (it would be nice to see the generated html code), but I think the loop closure is in the wrong place. Each iteration should correspond to a row of the table, then the foreach should end after </tr> .

    
answered by 12.08.2016 в 14:37