Obtener Id de imagen al cliquear con Prototype
Publicado por Borja (1 intervención) el 08/03/2008 13:41:30
-Hola a todos:
Estoy empezando con esto de ajax de la mano de prototype y me encuentro con un problema que no se solucionar. Tengo una pagina que al cargarse muestra imágenes obtenidas con php de una base de datos en mysql. Lo que quiero es que cuando el usuario cliquee sobre la imagen, yo pueda recuperar, mediante un evento la id (del div) de esa imagen, y así poder mostrarla en otro div.
Utilizo Event.element para extraer el id, pero ni Firefox ni IE me devuelven la información. No se si será porque se trata de una imagen, en vez de cualquier otro tipo de control.
Os paso el código por si alguien sabe donde puede estar el problema. Gracias de antemano por la ayuda:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CestaBorja</title>
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<style>
#lista
{position: absolute;left: 10%;width: 20%;}
#compra{position: absolute;left: 50%;width: 20%;}
#papelera{position: absolute;left: 80%;width: 20%;}
</style>
</head>
<body>
<div id='lista' name='lista'>
<?php
require('conexion.php');
$resultado=mysql_query("SELECT * FROM productos");
while($registro=mysql_fetch_array($resultado))
{
echo
"
<div id='" . $registro['idproducto'] . "' name='productos'>
<img src = mostrar.php?id=" . $registro['idproducto'] . ">" . $registro['idproducto'] . "
</div>
";
}
?>
</div>
<div id='compra' name='compra'>
</div>
<div id='papelera' name='papelera'>
Papelera:
</div>
<script type="text/javascript" language="javascript">
// Registra el evento
Event.observe('lista', 'click', funcion1, false);
// Funcion que se activa ante la llamada del evento:
function funcion1 (e)
{
// Obtener el elemento que ha originado el evento (el DIV)
var elemento = Event.element(e);
// Mostrar mensaje con los datos obtenidos:
alert(elemento.id);
document.getElementById('compra').innerHTML=
document.getElementById('compra').innerHTML + "<br>" + "<div id='" + elemento.id + "' name='aaa'> <img src = mostrar.php?id=" + elemento.id + "></div>";
};
</script>
</body>
</html>
Estoy empezando con esto de ajax de la mano de prototype y me encuentro con un problema que no se solucionar. Tengo una pagina que al cargarse muestra imágenes obtenidas con php de una base de datos en mysql. Lo que quiero es que cuando el usuario cliquee sobre la imagen, yo pueda recuperar, mediante un evento la id (del div) de esa imagen, y así poder mostrarla en otro div.
Utilizo Event.element para extraer el id, pero ni Firefox ni IE me devuelven la información. No se si será porque se trata de una imagen, en vez de cualquier otro tipo de control.
Os paso el código por si alguien sabe donde puede estar el problema. Gracias de antemano por la ayuda:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CestaBorja</title>
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<style>
#lista
{position: absolute;left: 10%;width: 20%;}
#compra{position: absolute;left: 50%;width: 20%;}
#papelera{position: absolute;left: 80%;width: 20%;}
</style>
</head>
<body>
<div id='lista' name='lista'>
<?php
require('conexion.php');
$resultado=mysql_query("SELECT * FROM productos");
while($registro=mysql_fetch_array($resultado))
{
echo
"
<div id='" . $registro['idproducto'] . "' name='productos'>
<img src = mostrar.php?id=" . $registro['idproducto'] . ">" . $registro['idproducto'] . "
</div>
";
}
?>
</div>
<div id='compra' name='compra'>
</div>
<div id='papelera' name='papelera'>
Papelera:
</div>
<script type="text/javascript" language="javascript">
// Registra el evento
Event.observe('lista', 'click', funcion1, false);
// Funcion que se activa ante la llamada del evento:
function funcion1 (e)
{
// Obtener el elemento que ha originado el evento (el DIV)
var elemento = Event.element(e);
// Mostrar mensaje con los datos obtenidos:
alert(elemento.id);
document.getElementById('compra').innerHTML=
document.getElementById('compra').innerHTML + "<br>" + "<div id='" + elemento.id + "' name='aaa'> <img src = mostrar.php?id=" + elemento.id + "></div>";
};
</script>
</body>
</html>
Valora esta pregunta
0