epelpad

Ventanas modales con variables PHP

Ventanas modales con variables PHP

Amigo taringuero le ha pasado alguna vez como desarrollador de paginas web que si bien ya muchos que ya sabemos que es una ventana modal ha intentado pasar una variable por url de PHP justamente en el enlace o url que genera una ventana modal y no pudo o no ha podido saber como carajos se hace ?

Para los que no saben que es una ventana modal la pueden ver en la foto de arriba es una ventana que sobre sale el resto del contenido de la pagina web aprovechando los espacios la pagina.

Puedes crear una formulario sobre ella y los datos que ingreses los recibiras con php sin problemas pero el problema es intente pasar una variable php sobre el enlace que genera la ventana modal, no pudes, es un gallo, por que ?, porque ese enlace tiene el codigo javascript que no retorna datos justamente para que quede visible la ventana modal.

Pues bien amigos, yo les traigo la solución pues como fanático al desarrollo me puse en la tarea de investigar hubo momentos de tristeza pero hoy lo logre como dicen es cuestión de tiempo.

En internet no esta la solución y nadie explica como se hace, generalmente los programadores que saben trucos importantes no los comparten, y los que creen que se la saben todas proponen soluciones en foros sin antes probar si en verdad sirve solo es idea.

Pues yo les traigo la solución, vi que en facebook actualmente usan este sistema que les explicare y durante un tiempo en mercadolibre lo hicieron.

Yo me puse en la tarea desde hace unos años descubrir como se hace una red social, hoy justamente logre hacer varias cosas entre estas el sistema de amigos en comun y justamente vi que facebook genera una ventana modal para listar los amigos en comun entonces me puse en la tarea de hacerlo y logre hacer la ventana modal y quede varado para pasar por esa misma url el id o variable PHP que contiene el id del usuario al que pinche o di click para ver sus amigos en comun conmigo dentro de la ventana modal desplegando la lista.

Me puse a mirar el codigo de facebook justo el enlace que genera la ventana modal con el navegador mozilla que por cierto es la mejor herramienta para programadores aunque en el navegador chrome lo que destaco es la herramienta que trae incluido para simular diseño adaptativo,

Y como les parece no trae el metodo onclick de javascript quizas porque estaran manejando otras herramientas pero ese no es el problema el problema era que no se veia como facebook pasaba la variable php entonces descubri la solucion.

primero que todo les mostrare el enlace al que me refiero y luego como es la ventana modal de la cual les hablo.

El enlace que les digo es el que esta dentro del circulo rojo, al dar click sobre el genera la ventana modal:

atributo data html

si dejo el mouse quieto sobre el enlace sin dar click sale el tooltip que muestra una parte de la lista de amigos en comun.

window modal with PHP


Ahora si doy click sobre ese enlace se abre esta ventana modal que muestra los amigos que tenemos en comun.


ventanas modales con variables p

Esa ventana modal es la que sobre sale en toda la pagina con fondo negro y la ventana pequeña en el centro mostrando la lista de amigos en comun y para que se pueda mostrar la lista de amigos se necesita el id del usuario al que se dio click.

A lo que vinimos => la solucion

La solucion radica en aprender a manejar el atributo de html llamado data- que lleva un guion que sirve para guadar informacion puedes ponerle al atributo el nombre que quieras despues del guion en ejemplo data-camara etc....


PASO 1 :

Lean este articulo sobre el atributo data-

http://www.htmlcinco.com/atributos-data/

PASO 2:

Aho como nos indican en el articulo, para nosotros lo mejor es acceder a dichos metadatos con javascript puro (sin frameworks como jQuery o Prototype), podemos hacerlo utilizando la API Dataset, de la siguiente manera:

var camara = document.getElementById('miImagen').dataset.camara;

La variable “camara” contendrá el valor del atributo “data-camara” que tenga el elemento con id “miImagen”.

PASO 3:

crearemos la ventana modal.

0. instalaran xampp o wamp server para probar el proyecto todos los desarrolladores los usamos porque es un servidor local y luego sino saben que editor usar les aconsejo que usen el mejor de todos que es gratis y es APTANA no el plugin para eclipse sino directamente el editor propio y luego crean un proyecto en el cual haran esto.


1. crear un archivo llamado index.php en el cual pegaran el siguiente texto.


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>

<?php

echo "<a href='amigosencomun.php?id=10'>Diana</a>";


?>


</body>
</html>




2. vamos a crear un archivo llamado amigosencomun.php en el cual pegaran el siguiente texto.


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>

<link rel="stylesheet" href="ventanamodal.css" />
<script type='text/javascript' src='ventanamodal.js'></script>

</head>
<body>
<?php

$amiguito = @$_GET['id'];
?>

<a href='javascript:void(0)' onclick='mostrareldiv();' data-idusuario="<?php echo $amiguito ?>" id="miventana" style='text-decoration:none; ' > <span> Mi ventana modal</span> </a>

<div id='fade' class='overlay' >
<div id='light' class='modal'>
<div id='msgcomun'>
<span class= 'msgdoscomun ' >Amigos en común </span>
<a class='closemodal' href = 'javascript:void(0)' onclick = 'ocultareldiv() '> X </a>
</div>


<div id="respuesta"></div>

</div>
</div>


</body>
</html>




3. crearemos un archivo llamado ventanamodal.js y en el pegaremos el siguiente codigo javascript con ajax, es mejor que se acostumbre a usar ajax.


ojo donde les sale una carita en color amarillo es esto un corchete que cierra ) entonces arreglan el codigo cuando lo peguen en el archivo.

function mostrareldiv() {

var httr = new XMLHttpRequest();
var url = "config.php";

document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
var id = document.getElementById("miventana".dataset.idusuario;
var variables = "idusuario="+id;
httr.open("POST",url,true);
httr.setRequestHeader("Content-type", "application/x-www-form-urlencoded";
httr.onreadystatechange = function()
{
if(httr.readyState == 4 && httr.status == 200)
{
var respuesta = httr.responseText;
document.getElementById("respuesta".innerHTML = respuesta;

}
}

httr.send(variables);

document.getElementById("respuesta".innerHTML = "procesando";
}

function ocultareldiv() {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}



4. crearemos un archivo llamado config.php y pegaran el siguiente codigo.


<?php

$idusuario = $_POST['idusuario'];

echo $retVal = (!isset($idusuario) ) ? "No se ha recibido dato ": " su id es ". $idusuario ;

?>



5. crearan un archivo css llamado ventanamodal.css y pegaran el siguiente codigo



* {
margin: 0;
padding: 0;
}



/* base semi-transparente */
.overlay{
display: none;
position: absolute;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;

z-index:1001;

/*opacity:.35;
-moz-opacity: 0.35;
filter: alpha(opacity=35);*/
}

/* estilo para lo q este dentro de la ventana modal */
.modal {
display: none;
position: relative;
margin:80px auto;
width: 446px;
height:464px;
padding: 0px;
background: #fff;
color: #333;
z-index:1002;
overflow-x: hidden;

}


por ultimo vamos a probar el proyecto, lo que tiene que hacer es ir al navegador y abrir la url localhost/nombredesuproyecto/index.php osea de acuerdo al nombre de su proyecto cuadran la url pero abren primero el archivo index.php y les aparecera el nombre de una persona le dan click para recibir su id y posteriormente los redirigira a la pagina amigosencomun.php donde aparecera un enlace llamado mi ventana modal al cual le daran click y se abrira la ventana modal mostrando el id.

En mi caso como proyecto personal le habia añadido otra consulta personal pero mas o menos les debe aparecer algo asi.

windows modal with vars php

y luego asi

Ventanas modales con variables PHP

Listo eso es todo el truco estaba en saber para que servia y saber manejar el atribuo data- de html pero tambien hay otros que usa facebook que esta el ajaxsify y el tal aria- pero lo que importa es que ya solucionamos el problema, ahora disfruten el nuevo conocimiento que adquirieron compartarlo y les recomiendo que miren mis otros post que tambien son buenos en especial de programacion.


Si le ha gustado mi post por favor no olvide reglarme 10 puntos

8 comentarios - Ventanas modales con variables PHP

SamanthaCaamal
Oye tienes tus archivos?? Me los puedes pasar?
rmontenegrof
Estimado, está muy interesante, y me resulta pero con un detalle que no puedo corrgir . Resulta que tengo una tabla con una lista de usuarios, y un boton editar para cada registro (los que se llenan dinamicamente desde la base de datos), eje:

Usuario editar
Luis boton
Pedro boton
...
...

Resulta que me envia el id del usuario a editar, pero siempre el primero de la lista, no el que que pincho.

Si me podrías ayudar te lo agradecería mucho.

Gracias
rmontenegrof
Solo para aclarar, Usuario y editar son las cabecera de la tabla.

Los registros serian ene ste caso Luis y Pedro, y boton seria el que me envíe su id a la ventana modal
trizo +1
Puedes resolverlo de varias maneras. La que prefiero es guardar el id del usuario en el <tr> como un data: "<tr data-id="'.$idUsuario.'"></tr>" por cada usuario y a través de algunas funciones de jQuery como .parents() y .data() obtengo el id. Cuando le des click en editar este buscará el parent "tr" y una vez encontrado obtengo la información a través de .data('id'). Si te preocupa la un poco la seguridad puedes usar MD5
JARAMILLO35
@trizo amigo como puedo obtener el id especifico con js usando data()?
JARAMILLO35
@trizo ya pude obtener el id por ajax.. pero me trae el mismo id asi le de click en los otros registros que podrias ser ?
nacho10o +1
Muy bueno, quisiera preguntarte, algo fuera de tema... Tengo una ventana modal, a la cual le necesito poner los botones compartir de fb y tw. hay manera de eso?
nicolait
pues quizas, no he hecho la prueba, con respecto a este post, voy a hacer el mismo con unos cambios, debido a que voy a publicar la consulta mysql de como listar los amigos en comun, en estos dias o sino mañana podria quedar publicado, ya hice el post sino que aconseje ahi ver una pelicula pero ya sabe que taringa bloquea post donde hallan ciertos tipos de links, ahi entonces vera pronto dos nuevos post.
albl2008 +1
Hermano como va? Muy buen trabajo. Yo ando necesitando llenar un modal con informacion de una base de datos, no me ubico bien, como seria mas o menos? Espero me puedas contestar. Saludos!
nicolait
compartame a mi correo un link de su repositorio en githubo o en dropbox o cualquier servicio de nube su codigo y expliqueme exacto su necesita como lo quiere para ayudarle.
albl2008
@nicolait https://www.dropbox.com/s/4ixkaq7euvs0q0v/index.php?dl=0 ahi se ve el modal en el que quiero llamar a la base de datos. Linea 70 y 73!
kapry
Buena info la leeré
te dejo los

Saludos