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

Giuliano comentado

Me aclaraste una duda y entendí porque se generaba el modal con el mismo id y entendí lo que quisiste hacer modificando el id del div, no funciona ahora no abre directamente el modal..
Me cuesta entender todavía el funcionamiento del modal de a poco voy entendiendo pero sigo sin poder solucionar mi problema :/

1voto

carlossevi comentado

Claro que no te abre el modal, porque tu código seguramente esté intentando abrir un modal llamado "edit-modal" y en tu html ya no existe ese modal, ahora se llaman "edit-modal-1", "edit-modal-2"... "edit-modal-n".

¿Puedes poner el código en el que se ordena la apertura del modal?

1voto

Giuliano comentado

Esta todo en el mensaje que deje pero ahora encontre esto que me resulto mucho mas facil solo me falta 1 sola pequeñez y podre resolverlo..

Observa este codigo:

<a data-toggle="modal" data-id="Mi Dato" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<div class="modal fade" id="addBookDialog" 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">&times;</button>
                <h4 class="modal-title" id="addBookDialog">Datos del Provedor</h4>
            </div>
            <div class="modal-body">
                <input type="text" name="bookId" id="bookId" value=""/>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
    $('#addBookDialog').modal('show');
});
</script>

Como podras ver cuando le doy click al boton envia "Mi Dato" en ese caso yo colocaria la ID del usuario, pero lo que tiene es que esa id se coloca dentro de un textbox, podre pasar el valor del textbox a una variable en php? es decir capturar lo que entra en (".modal-body #bookId") y pasarlo a una variable en php si eso es posible se solucionaria todo mi conflicto y trabajaria sobre la apertura del modal...

1voto

carlossevi comentado

Menudo lío ¿ese es tu código? No se corresponde para nada los nombres de los estilos y los ids... en tu código no hay ninguna clase "open-AddBookDialog" ni id "bookId".

Pon por favor tu código completo, tanto html generado como javascript.

1voto

Giuliano comentado

Este es mi codigo completo:

            <table class="table table-bordered table-hover">
            <thead>
            <th>Codigo</th>
            <th>Cuit</th>
            <th>Tipo Iva</th>
            <th>Razon Social</th>
            <th></th>
            </thead>
            <?php
            foreach($users as $user){
                ?>
                <tr>
                <td><?php echo $user->code; ?></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" 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-cust-<?php echo $user->id;?>" 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>
                        ID:<?php echo $user->id; ?>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <?php }
                }else{
            echo "<p class='alert alert-danger'>No hay proveedores</p>";
            }
            ?>

1voto

carlossevi comentado

¿Y el Javascript?

1voto

Giuliano comentado

No contiene javascript, asi pasaba los datos al modal por eso se repetian pero busque mas de mil maneraas y todavia no encuentro la forma de colocar varios datos en un modal, me tiene perdido el modal..

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