entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Como envio datos de un usuario a un modal

Hola antes que nada queria informar que ya vi muchisimos post de como enviar datos a un modal pero ninguno me fue de ayuda y no pude terminar de realizar lo que necesito...

Lo que necesito es ampliar la informacion de un usuario registrado es decir, en una tabla solo visualizo tres parametros y en el modal todos dejo mi codigo de lo que intente hacer:

            foreach($users as $user){
                ?>
                <tr>
                <td><?php echo $user->name." ".$user->lastname; ?></td>
                <td><?php echo $user->address1; ?></td>
                <td><?php echo $user->email1; ?></td>
                <td><?php echo $user->phone1; ?></td>
                <td style="width:130px;">
                <a data-toggle="modal" href="#myModal" data-target="#edit-modal" id="<?php echo $user->id;?>" class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-zoom-in"></i></a> 
                <a href="index.php?view=editprovider&id=<?php echo $user->id;?>" class="btn btn-warning btn-xs"><i class="fa fa-edit"></i></a> 
                <a href="index.php?view=delprovider&id=<?php echo $user->id;?>"class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></a> 

                </td>
                </tr>
            <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalLabel">Datos del Provedor</h4>
                        </div>
                        Nombre:<?php echo $user->name." ".$user->lastname; ?>
                        Diresion:<?php echo $user->address1; ?>
                        Correo:<?php echo $user->email1; ?>
                        Telefono:<?php echo $user->phone1; ?>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

Lo que intente hacer fue visualizar los parametros antes de cerrar el foreach es decir aprovechando el mismo pero si tengo mas de 2 clientes a todos los clientes del sistema muestra el mismo valor que el primero.
Es decir a todos los que intente ver o abrir el modal me muestra los mismos datos que el primer usuario...

La otra solucion que intente fue enviar la id mediante el modal y mediante la id sacar todos los otros parametros pero no llege a concretarlo solo enviaba la id y unicamente se podia visualizar la id, funcionaba pero era solo un simple numerito..

1 Respuesta

3votos

carlossevi Puntos63580

Mi pronóstico es que no creo que se estén generando todos los modales con el mismo valor que el primero, sino que se están generando todos los modales con el mismo id: <div id="edit-modal"....

Al tener todos los modales el mismo id supongo que siempre se muestra el primero de todos, de ahí que te parezca que todos tienen los mismos datos. Comprueba el código fuente generado y verifica si eso es cierto.

Cuando crees elementos html dentro de un bucle asegurate de que los id van cambiando. Puedes probar por ejemplo:

<div id="edit-modal-cust-<?php echo $user->id;?>" class="modal fade" 
...

Por último otro consejo para cuando estás intentando generar dinámicamente con PHP un código HTML que no controlas y no consigues hacer que funcione: divide el problema en dos. Haz una pequeña maqueta manualmente con HTML estático para asegurarte de que los datos se ven bien y los modales funcionan, y después intenta reproducir ese HTML escrito a mano con HTML generado desde PHP.

1voto

carlossevi comentado

¿Y cómo se habría anteriormente tu modal si no tenías Javascript que le ordenara abrirse?
Te recomiendo que leas la documentación oficial de Bootstrap Modal para entender cómo funciona: http://getbootstrap.com/javascript/#modals

4votos

Leonardo-Tadei comentado

Hola @Giuliano,

el amigo @carlossevi está apuntando en la dirección correcta: tu problema es que generabas varios modal con el mismo ID, y los ID en HTML deben ser únicos.

Ahora estás generando cada modal con un ID distinto, que armás así:

id="edit-modal-cust-<?php echo $user->id;?>"

Lo que te falta hacer es que cuando generás el botón para abrir el modal, hacer que el data-target sea el mismo del modal que querés abrir:

...
<td><?php echo $user->phone1; ?></td>
                <td style="width:130px;">
                <a data-toggle="modal" href="#myModal" data-target="#edit-modal-cust-<?php echo $user->id;?>" id="<?php echo $user->id;?>" class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-zoom-in"></i></a>
...

Luego, Boostrap relaciona el ID del modal con el data-target del botón y sabe cual abrir.

Saludos cordiales!

3votos

carlossevi comentado

@Leonardo-Tadei tiene toda la razón, no es necesario tocar el Javascript porque Bootstrap ya se encarga de manejarlo siempre que pongas el data-target en el button preparado para ello.

Me despisté =)

2votos

Giuliano comentado

Que tal leonardo, tengo una consulta como ahi colocaste el data-target con el id del usuario lo que por ahi no me queda claro es que si en el modal en el div del modal tengo que colocar algo como para identificar cierta id y no abrir el mismo generado una y otra vez con la misma id.. Teninendo mi codigo asi:

                <td><?php echo $user->email1; ?></td>
                <td><?php echo $user->cuit; ?></td>
                <td><?php echo $user->tiva; ?></td>
                <td><?php echo $user->rsoc; ?></td>
                <td style="width:130px;">
                <a data-toggle="modal" href="#myModal" data-target="#edit-modal-cust-<?php echo $user->id;?>" id="<?php echo $user->id;?>" class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-zoom-in"></i></a>
                <a href="index.php?view=editprovider&id=<?php echo $user->id;?>" class="btn btn-warning btn-xs"><i class="fa fa-edit"></i></a> 
                <a href="index.php?view=delprovider&id=<?php echo $user->id;?>"class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></a> 

                </td>
                </tr>
            <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalLabel">Datos del Provedor</h4>
                        </div>
                        Codigo:<?php echo $user->email1; ?>
                        cuit:<?php echo $user->cuit; ?>
                        Tipo iva:<?php echo $user->tiva; ?>
                        rsoc:<?php echo $user->rsoc; ?>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

Me sigue sin abrir el modal... Disculpas por ser tan terco me cuesta comprender voy de a poco amoldandome a js..

3votos

Leonardo-Tadei comentado

Hola @Giuliano,

validá el códogo HTML generado de la página completa en http://validatro.w3.org para ver si no tenés algún error de HTML, y en caso de tenerlo, corregilo según te indique el validador.

Luego, el tema de los modales de Bootstrap no es tan complejo como parece: en el A en que querés que se abra el modal al hacer click, tenés que poner el atributo data-target con valor igual al del ID del modal que querés que se abra.

Revisá que esto se cumpla viendo el HTML generado en el navegador con Ctrl+U, luego de estar seguro de que HTML es válido, ya que el funcionamiento de buena parte del JavaScript depende de que el documento esté bien formado.

Saludos cordiales!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta