actulizar imagen con ajax con php y mysql

eduardodp · #1 (**permalink**) 16/02/2013, 12:51

Hola ya habia posteado esto antes pero mas complicado ahora lo boy a simplificar bueno tengo una consulta en la que muestro los productos de una bd y junto a ellos una imagen que tiene que cambiar al darle click por ejemplo por defecto tiene la imagen de agregar y quiero que al darle clic se cmbie solo la imagen de agregar a la de quitar y viceversa utilizo dos paginas de php con las imagenes
bueno como ya habia posteado esto antes me recomendaron estudiar ajax asi que lo hice y trate de haerlo pero el problema esta que solo actuliza la imagen de el primer resultado y en todas las demas me cambia de pagina ademas de que en en el primer resultado al cambiar la imagen y volverle a clickear me cambia de pagina bueno les dejo mi codigo.
Gracias por sus respuestas
Nota: Tengo que usar php por que mas adelante boy a meter funciones

Código HTML:

<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>agregar</h1>
<div id="menu">
<?php include("conex.php");  
$con=mysql_query("select descripcion from productos order by descripcion");
while($res=mysql_fetch_array($con)){
?>
<p><?php echo $res['descripcion'];?><div id="detalles"><a id="enlace1" href="pagina1.php?cod=1"><img src="../images/add.png" width="32" height="32"></a></div></p>
<?php }?>

</div>
</body>
</html>

y en php dos paginas con las imagenes a cambiar
Pagina1

Código PHP:

  <?php

header('Content-Type: text/html; charset=ISO-8859-1');

if ($_REQUEST['cod']==1){?>

 <a id='enlace1' href='pagina2.php?cod=2'><img src="../images/quitar.png" width="16" height="16" /></a>

  <?php }

Pagina 2

Código PHP:

  <?php 

if($_REQUEST['cod']==2){?>

<a id="enlace1" href="pagina1.php?cod=1"><img src="../images/add.png" width="32" height="32" /></a>

<?php } ?>

y por ultimo el condigo ajax

Código:

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ob;
  for(f=1;f<=1000;f++)
  {
    ob=document.getElementById('enlace'+f);
    addEvent(ob,'click',presionEnlace,false);
  }
}

function presionEnlace(e)
{
  if (window.event)
  {
    window.event.returnValue=false;
    var url=window.event.srcElement.getAttribute('href');
    cargarHoroscopo(url);     
  }
  else
    if (e)
    {
      e.preventDefault();
      var url=e.target.getAttribute('href');
      cambiaricono(url);     
    }
}


var conexion1;
function cambiaricono(url) 
{
  if(url=='')
  {
    return;
  }
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open("GET", url, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var detalles = document.getElementById("detalles");
  if(conexion1.readyState == 4)
  {
    detalles.innerHTML = conexion1.responseText;
  } 
  else 
  {
    detalles.innerHTML = 'Cargando...';
  }
}

function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

iukaeru · #2 (**permalink**) 19/02/2013, 07:18

¿Y cuál es el problema? Por favor indícanos en dónde (o cerca de dónde) tienes el problema que a veces uno no tiene tiempo de revisar tooooooooooodo el código.

eduardodp · #3 (**permalink**) 19/02/2013, 15:07

Pues mi querido iukaeru es que no se endonde esta el error mira para que sea mas claro de que es lo que tiene que hacer entra aca y dale click al boton de mas, cambia el primero pero los demas no
http://tecnosian.com/movil/php/catalogo2.php
pues se supone que tiene que cambiar solo el boton
Les agradezco sus respuestas

iukaeru · #4 (**permalink**) 21/02/2013, 07:27

JAJAJAJAJA, valió el tirón de orejas y nos diste un poco más de info.

Bueno, lo primero que veo es que tienes que modificar el código PHP que entrega la primera información al cliente ya que TODOS los items te están saliendo con el mismo ID (enlace1), incluso el enlace con el código de producto para PHP (pagina1.php?cod=1)

Lo debes modificar, de una forma mas o menos así, dentro de un bucle que incremente una variable por ejemplo "$i":

print "
<div id='detalles'><a id='enlace". $i ."' href='pagina1.php?cod=". $i ."'><img src='../images/add.png' width='32' height='32'></a></div></p>
";
$i++;

Me hago entender?

eduardodp · #5 (**permalink**) 21/02/2013, 12:03

Bien mi querido iukaeru lo he hecho como me dices el primer resultado si cambia la imagen pero en cuando le doy a los demas me cambia el primer resultado
checalo en la paginahttp://www.tecnosian.com/movil/php/catalogo2.php
No tendria yo que modificar el <div id="detalles"> que es en donde tiene que mostrar el resultado supongo que seria <div id="detalles<?php echo $i ?>"> para que cada donde muestre los resultados sea un div diferente pero ahora en la parte de javascript como optendria el id
si estaba asi var detalles = document.getElementById("detalles");

iukaeru · #6 (**permalink**) 21/02/2013, 16:19

Cita:

Iniciado por eduardodp

... No tendria yo que modificar el <div id="detalles"> que es en donde tiene que mostrar el resultado supongo que seria <div id="detalles<?php echo $i ?>"> para que cada donde muestre los resultados sea un div diferente pero ahora en la parte de javascript como optendria el id
si estaba asi var detalles = document.getElementById("detalles");

Tu mismo la has dicho.

Y modificas ésto:

var ob;
for(f=1;f<=1000;f++)
{
ob=document.getElementById('detalles'+f);

Si no te funciona luego revisamos que hoy voy muy de afán y no he leído BIEN tu código.
Ojalá y eso sea tu solución.

Reedyseth · #7 (**permalink**) 21/02/2013, 17:40

Para empezar vamos viendo, traes unos errores en tu Javascript:

Código CODE:

Ver originalUncaught TypeError: Cannot read property 'attachEvent' of null funciones.js:59
Uncaught ReferenceError: cargarHoroscopo is not defined funciones.js:19

Veririca que estes creando bien tus variables y que se creen en el scope correcto, posiblemente 'attachEvent' le haces referencia a un nodo que no estas referenciando bien, checalos por favor.

emprear · #8 (**permalink**) 21/02/2013, 19:36

Cita:

Iniciado por Reedyseth

Para empezar vamos viendo, traes unos errores en tu Javascript:

Código CODE:

Ver originalUncaught TypeError: Cannot read property 'attachEvent' of null funciones.js:59
Uncaught ReferenceError: cargarHoroscopo is not defined funciones.js:19

Veririca que estes creando bien tus variables y que se creen en el scope correcto, posiblemente 'attachEvent' le haces referencia a un nodo que no estas referenciando bien, checalos por favor.

Si, más o menos el error pasa por ahi, de todas formas creo que se está complicando la vida, agrega un evento a window, cuando creo deberia hacerlo a window.document, y a su vez este dispara una función que vuelve a llamar a la función que agrega eventos, esta vez para agregarlos a los links... seguramente se está perdiendo en algún parámetro.

Ahora, y eso es lo que se observa del html, lo que quiere es agregarle un evento a todos los links dentro de un contenedor específico (div#menu), yo sencillamente haría lo siguiente

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function mostrar_titulo(t){
alert('title="'+ t.title + '"  href=' + t.href);
}
 
 
window.onload = function(){
var linksmenu = [];
var contiene_links = document.getElementById('menu');
linksmenu = contiene_links.getElementsByTagName('a');   
    for (i=0; i<linksmenu.length; i++) {
        if (linksmenu[i].addEventListener){
        linksmenu[i].addEventListener("mouseover", function(){mostrar_titulo(this)}, false);
        }else{ // <IE9
            if (linksmenu[i].attachEvent){
            linksmenu[i].attachEvent ("onmouseover", function () {mostrar_titulo(this)});
        }   
        }
    }
}
//]]>
</script>
</head>
<body>
<div id="menu">
<a href="a.html" title="titulo a">a</a><br />
<a href="b.html" title="titulo b">b</a><br />
<a href="c.html" title="titulo c">c</a><br />
</div>
</body>
</html>

SAludos