Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Como cambiar una imagen en un div sin refrescar la pagina

Estas en el tema de Como cambiar una imagen en un div sin refrescar la pagina en el foro de Frameworks JS en Foros del Web. Hola amigos, Yo he logrado que al dar click en una imagen unos datos sean añadidos a la base de datos sin refrescar la pagina, ...
  #1 (permalink)  
Antiguo 24/02/2010, 12:43
Avatar de saymon  
Fecha de Ingreso: septiembre-2003
Ubicación: Panama
Mensajes: 318
Antigüedad: 20 años, 7 meses
Puntos: 0
Como cambiar una imagen en un div sin refrescar la pagina

Hola amigos,

Yo he logrado que al dar click en una imagen unos datos sean añadidos a la base de datos sin refrescar la pagina, pero el asunto es: que cuando estos datos son añadidos el javascrip me manda un mensaje alert (Listo Insertado), lo que quiero es que en lugar de mandarme el mensaje me cambie la imagen a la que le hice click,
Aqui les dejo mi codigo:

Imagen a la cual le doy click para añadir los datos a la BD:

Código HTML:
<div id="12345" style="float:left; margin-right:4px;">
<a href ="javascript:ProcessXML('insertar.php?nombre=thalia&cancion=pielmorena&ruta=archivos/thalia')"><img src="/images/fav.gif" border="0" title="Add to Favorite" height="10" width="10" /></a>
</div> 
Y estes es el codigo que me inserta los datos sin refrescar la pagina, como veran me manda es un alert, lo que quiero es que en lugar de ese alert me mande para atras algo como esto:
Código HTML:
"<img src='/images/deletefav.gif' border='0' title='Remove Favorite' height='10' width='10' />"
de este modo me cambiaria la imagen:

Código Javascript:
Ver original
  1. var obj;
  2.  
  3. function ProcessXML(url) {
  4.  
  5.   if (window.XMLHttpRequest) {
  6.     obj = new XMLHttpRequest();
  7.     obj.onreadystatechange = processChange;
  8.     obj.open("GET", url, true);
  9.     obj.send(null);
  10.   } else if (window.ActiveXObject) {
  11.     obj = new ActiveXObject("Microsoft.XMLHTTP");
  12.     if (obj) {
  13.       obj.onreadystatechange = processChange;
  14.       obj.open("GET", url, true);
  15.       obj.send();
  16.     }
  17.   } else {
  18.     alert("Your browser does not support AJAX");
  19.   }
  20. }
  21.  
  22. function processChange() {
  23.     // 4 means the response has been returned and ready to be processed
  24.     if (obj.readyState == 4) {
  25.         // 200 means "OK"
  26.         if (obj.status == 200) {
  27.                      alert("Listo Insertado");
  28.             // process whatever has been sent back here:
  29.         // anything else means a problem
  30.         } else {
  31.             alert("There was a problem in the returned data:\n");
  32.         }
  33.     }
  34. }

Gracias de antemano a cualquier ayuda
  #2 (permalink)  
Antiguo 24/02/2010, 12:57
Avatar de eulloa  
Fecha de Ingreso: octubre-2007
Ubicación: Donde caiga la noche, si mi hijo me deja
Mensajes: 691
Antigüedad: 16 años, 5 meses
Puntos: 5
Respuesta: Como cambiar una imagen en un div sin refrescar la pagina

Sin mirar detenidamente, creo q debes cambiar en la función processChange, el alert por lo q deseas cambiar
  #3 (permalink)  
Antiguo 24/02/2010, 13:01
Avatar de saymon  
Fecha de Ingreso: septiembre-2003
Ubicación: Panama
Mensajes: 318
Antigüedad: 20 años, 7 meses
Puntos: 0
Respuesta: Como cambiar una imagen en un div sin refrescar la pagina

Si exacto, eso lo tenia algo claro tambien... el punto es que necesito ayuda con el codigo en sí, no se como se hacerlo o que codigo es el que me hace eso. Sorry pero es que soy bastante nuevo en Ajax y JS, aunk he leido manuales basicos ya, no he llegado a encontrar como hago esto, alguna ayuda con u ejemplo de que poner alli ? para remplazar el alert ?

Etiquetas: ajax, refrescar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:59.