Foros del Web » Programando para Internet » Javascript »

Actualizar solo la imagen sin recargar pagina

Estas en el tema de Actualizar solo la imagen sin recargar pagina en el foro de Javascript en Foros del Web. Hola de nuevo a todos estoy pot terminar sitio web para moviles en el cual tengo un catalogo de productos pero al seleccionar el producto ...
  #1 (permalink)  
Antiguo 31/01/2013, 16:43
 
Fecha de Ingreso: diciembre-2012
Ubicación: Puebla
Mensajes: 34
Antigüedad: 11 años, 4 meses
Puntos: 1
Actualizar solo imagen con ajax en carrito de compra

Hola de nuevo a todos estoy pot terminar sitio web para moviles en el cual tengo un catalogo de productos pero al seleccionar el producto se recarga toda la pagina este entonces lo que quiero saber es como hacer que solo se recargue la imagen para saber que esta seleccionado se que se utiliza ajax pero no he probado con eso
Este es mi codigo es php y necesita recargarse la pagina solo quiero que se actualize el la imagen
Código:
if(!$carro || !isset($carro[md5($row['clave'])]['identificador']) || $carro[md5($row['clave'])]['identificador']!=md5($row['clave'])){
	//si el producto no ha sido agregado, mostramos la imagen de no agregado, linkeada
	// a nuestra página de agregar producto y transmitíéndole a dicha
	//página el id del artículo y el identificador de la sesión
	?><a href="agregacar.php?<?php echo SID ?>&id=<?php echo $row['clave']; ?>&li=<?php echo 1 ?>&accion=agregar"><img src="../images/agregar.jpg"></a>
      <?php }
	else
	//en caso contrario mostramos la otra imagen linkeada., a la página que sirve para borrar el artículo del carro.
	{?><a href="agregacar.php?<?php echo SID ?>&id=<?php echo $row['clave']; ?>&li=<?php echo 1 ?>&accion=quitar" >
    
      <img src="../images/quitar.png"> </a>
      <?php } ?>
  #2 (permalink)  
Antiguo 31/01/2013, 17:26
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Actualizar solo imagen con ajax en carrito de compra

Hola:

Si solo quieres cambiar una imagen, basta con cambiar su atributo src... en tal caso no se usa Ajax... y si fuese la misma imagen (si no lo es, esto no te servirá), puedes añadir un parámetro fantasma para evitar la carga desde la caché.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 31/01/2013, 18:09
 
Fecha de Ingreso: diciembre-2012
Ubicación: Puebla
Mensajes: 34
Antigüedad: 11 años, 4 meses
Puntos: 1
Respuesta: Actualizar solo imagen con ajax en carrito de compra

Ok amigo pero no solo seria la imagen sera tambien el link uno es para agregar y el otro para quitar por eso manejo dos imagenes
  #4 (permalink)  
Antiguo 01/02/2013, 13:15
 
Fecha de Ingreso: diciembre-2012
Ubicación: Puebla
Mensajes: 34
Antigüedad: 11 años, 4 meses
Puntos: 1
Actualizar solo la imagen sin recargar pagina

Hola yo sigo de pregunton tengo una lista de poductos con un icono de + si es que se quiere agregar y con un icono de - si es que se quiere quitar bueno cada imagen me manda a una pagina php que va agrendo dichos productos a un carrito y a hotra para quitar el producto bueno cada que doy click por ejemplo a agregar + me manda a la pagina para agregar y me retorna a la misma para seguir a gregando o quitando productos pero en ese ttranscurso de agregar o quitar se actualiza la pagina y para agilizar las cosas quiero que solo se actualice el icono de + y - no que recargue toda la pagina este es el codigo de los productos con las imagenes
Código HTML:
<table width="378" border="0"><?php 			while($row=mysql_fetch_array($qry))
			{		?>
  <tr>
    <td width="259"><?php echo $row['descripcion'] ?><br>
          $<?php echo $row['precio_men'];?></td>
    <td width="109"> <?php
	if(!$carro || !isset($carro[md5($row['clave'])]['identificador']) || $carro[md5($row['clave'])]['identificador']!=md5($row['clave'])){
	//si el producto no ha sido agregado, mostramos la imagen de no agregado, linkeada
	// a nuestra página de agregar producto y transmitíéndole a dicha
	//página el id del artículo y el identificador de la sesión
	?><a href="agregacar.php?<?php echo SID ?>&id=<?php echo $row['clave']; ?>&accion=agregar"><img src="../images/agregar.jpg"></a>
    <div id="menu">
<p>
    <div id="detalles"><a id="enlace1" href="pagina1.php?cod=1&<?php echo SID ?>&id=<?php echo $row['clave']; ?>">Aries</a></div></p></div>
      <?php }
	else
	//en caso contrario mostramos la otra imagen linkeada., a la página que sirve para borrar el artículo del carro.
	{?><a href="agregacar.php?<?php echo SID ?>&id=<?php echo $row['clave']; ?>&li=<?php echo 1 ?>&accion=quitar" >
    
      <img src="../images/quitar.png"> </a>
      <?php } ?>
          </td>
  </tr><?php } ?>
</table> 
Este es el codigo php de agregar y quitar
Código PHP:
<?php 
session_start
();
//error_reporting(E_ALL);
//@ini_set('display_errors', '1');
//con session_start() creamos la sesión si no existe o la retomamos si ya ha sido creada
if($acc="agregar"){
extract($_REQUEST);
//la función extract toma las claves de una matriz asociativa y las convierte en nombres de variable,
//asignándoles a esas variables valores iguales a los que tenía asociados en la matriz. Es decir, convierte a $_GET['id'] en $id,
//sin que tengamos que tomarnos el trabajo de escribir $id=$_GET['ID']; 
include('conex.php');
//incluímos la conexión a nuestra base de datos
$precio=$_POST['predit'];
if(!isset(
$cantidad)){$cantidad=1;}
$valor=0;
if(
$precio==""){
    
$precio=$_COOKIE['precio'];
    }
//Como también vamos a usar este archivo para actualizar las cantidades,
//hacemos que cuando la misma no esté indicada sea igual a 1
$qry=mysql_query("select * from productos where clave='".$id."'");
$row=mysql_fetch_array($qry);
//Si ya hemos introducido algún producto en el carro lo tendremos guardado temporalmente
//en el array superglobal $_SESSION['carro'], de manera que rescatamos los valores de dicho array
//y se los asignamos a la variable $carro, previa comprobación con isset de que $_SESSION['carro']
//ya haya sido definida
 
 
$temp $cantidad;
$uesp $row['uesp'];
$umay =$row['umay'];
$presp=$row['precio_esp'];
$premay=$row['precio_may'];
$premen=$row['precio_men'];
$pcliente=$precio;
$tipo="";
switch(
$pcliente){
case 
0:
           
$valor=0;
            break;
case 
1:

           if ((
$uesp>0)and($temp>=$uesp)){
             
//{Aplica para precio especial}
   
             
$valor$presp;
             
$tipo="Especial";
              
           }else if ((
$umay>0)and($temp>=$umay)){ 
           
//{Aplica para precio mayoreo}
            
$valor=$premay;
              
$tipo="Mayoreo";
           }else {
    
             
$valor$premen;
             
$tipo="Menudeo";
           }
     break;
      case 
2:
           if ((
$uesp>0)and($temp>=$uesp)){ 
            
//{Aplica para precio especial} 
              
             
$valor=$presp;
             
$tipo="Especial";
            
            
           }else {
 
            
            
$valor=$premay;
            
$tipo="Mayoreo";
            
           }
     break;
      case 
3:
              
               
$tipo="Especial";
            break;
              
      break;
      
      case 
5:
               
$valor=$premen;
               
$tipo="Menudeo";
             break;
      case 
6:
               
$valor=$premay;
               
$tipo="Mayoreo";
             break;
      case 
7:
               
$valor=$presp;
               
$tipo="Especial";
             break;
             
      case 
8:
               
$valor=0;
               
$tipo="Otro";
             break;
      
}
          

//$tprecio = 1 //1:menudeo, 2:mayoreo, 3:especial




if(isset($_SESSION['carro']))
$carro=$_SESSION['carro'];
//Ahora introducimos el nuevo producto en la matriz $carro, utilizando como índice el id del producto
//en cuestión, encriptado con md5. Utilizamos md5 porque genera un valor alfanumérico que luego,
//cuando busquemos un producto en particular dentro de la matriz, no podrá ser confundido con la posición
//que ocupa dentro de dicha matriz, como podría ocurrir si fuera sólo numérico.
//Cabe aclarar que si el producto ya había sido agregado antes, los nuevos valores que le asignemos reemplazarán
//a los viejos. 
//Al mismo tiempo, y no porque sea estrictamente necesario sino a modo de ejemplo, guardamos más de un valor 
//en la variable $carro, valiéndonos de nuevo de la herramienta array.
$carro[md5($id)]=array('identificador'=>md5($id),'cantidad'=>$cantidad,'producto'=>$row['descripcion'],'precio'=>$valor,'id'=>$id,
'tipo_precio'=>$tipo);
//Ahora dentro de la sesión ($_SESSION['carro']) tenemos sólo los valores que teníamos (si es que teníamos alguno) antes de ingresar
//a esta página y en la variable $carro tenemos esos mismos valores más el que acabamos de sumar. De manera que 
//tenemos que actualizar (reemplazar) la variable de sesión por la variable $carro.
$_SESSION['carro']=$carro;
//Y volvemos a nuestro catálogo de artículos. La cadena SID representa al identificador de la sesión, que, dependiendo 
//de la configuración del servidor y de si el usuario tiene o no activadas las cookies puede no ser necesario pasarla por la url.
//Pero para que nuestro carro funcione, independientemente de esos factores, conviene escribirla siempre.
header("Location:ctalogo.php?".SID);
}else if(
$acc=="quitar"){
    
$lin=$_GET['li'];

session_start();

//error_reporting(E_ALL);

//@ini_set('display_errors', '1');

//con session_start() creamos la sesión si no existe o la retomamos si ya ha sido creada

extract($_GET);

//Como antes, usamos extract() por comodidad, pero podemos no hacerlo tranquilamente
$carro=$_SESSION['carro'];

//Asignamos a la variable $carro los valores guardados en la sessión

unset($carro[md5($id)]);

//la función unset borra el elemento de un array que le pasemos por parámetro. En este

//caso la usamos para borrar el elemento cuyo id le pasemos a la página por la url 

$_SESSION['carro']=$carro;

//Finalmente, actualizamos la sessión, como hicimos cuando agregamos un producto y volvemos al catálogo

header("Location:catalogo.php?".SID);


    
    
    }
?>
  #5 (permalink)  
Antiguo 01/02/2013, 13:49
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 17 años, 11 meses
Puntos: 2135
Respuesta: Actualizar solo la imagen sin recargar pagina

Para eso tienes que usar AJAX, no puedes hacerlo con PHP directamente ya que PHP se ejecuta en el servidor, necesitas usar javascript para poder extraer los datos desde el servidor e inyectarlos en el cliente en tiempo real.

Saludos.
  #6 (permalink)  
Antiguo 01/02/2013, 15:09
 
Fecha de Ingreso: diciembre-2012
Ubicación: Puebla
Mensajes: 34
Antigüedad: 11 años, 4 meses
Puntos: 1
Respuesta: Actualizar solo la imagen sin recargar pagina

Perfecto pero la cuestioen es que en mi vida jamas he usado AJAX si me ayudaran a como hacerlo seria de gran ayuda bueno por algo pregunto jejejeje
  #7 (permalink)  
Antiguo 01/02/2013, 16:02
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 17 años, 11 meses
Puntos: 2135
Respuesta: Actualizar solo la imagen sin recargar pagina

Pues si esperas que alguien te haga el código vas a tardar, es mejor que aprendas para que y como sirve AJAX, y mejor intentes hacerlo, a menos que quieras esperar a que alguien te haga el código de buena onda.

Saludos.
  #8 (permalink)  
Antiguo 01/02/2013, 16:09
 
Fecha de Ingreso: diciembre-2012
Ubicación: Puebla
Mensajes: 34
Antigüedad: 11 años, 4 meses
Puntos: 1
Respuesta: Actualizar solo la imagen sin recargar pagina

Thanks ¿algun tutorial que recomiendes? o ejemplos
  #9 (permalink)  
Antiguo 01/02/2013, 16:32
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 17 años, 11 meses
Puntos: 2135
Respuesta: Actualizar solo la imagen sin recargar pagina

El de Maestros del Web es muy bueno: http://www.maestrosdelweb.com/editorial/ajaxpaso/

Saludos.
  #10 (permalink)  
Antiguo 01/02/2013, 17:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Actualizar solo la imagen sin recargar pagina

Hola:

No entiendo ¿por qué? has duplicado el tema (aunque pusieses otro título)...

Para aplicar Ajax, te recomiendo que primero funcione tu página normalmente, y luego añadas el código Ajax.. por ejemplo, teniendo un enlace (tal como veo que tienes)... <a href="agregar.php">... añadir una asociación a una rutina Ajax... <a... onclick="return agregar()">; y ese agregar devuelva el valor false para cancelar el enlace y a la vez haga una llamada al servidor via Ajax para no recargar la página, sin olvidarte de actualizar la página... No es difícil, pero debes tener los conceptos muy claros...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 16/02/2013, 10:51
 
Fecha de Ingreso: diciembre-2012
Ubicación: Puebla
Mensajes: 34
Antigüedad: 11 años, 4 meses
Puntos: 1
Respuesta: Actualizar solo la imagen sin recargar pagina

Ok bro he tratado de hacerlo pero solo me actulaliza el primero este es el javascript
Código Javascript:
Ver original
  1. addEvent(window,'load',inicializarEventos,false);
  2.  
  3. function inicializarEventos()
  4. {
  5.   var ob;
  6.   for(f=1;f<=1000;f++)
  7.   {
  8.     ob=document.getElementById('enlace'+f);
  9.     addEvent(ob,'click',presionEnlace,false);
  10.   }
  11. }
  12.  
  13. function presionEnlace(e)
  14. {
  15.   if (window.event)
  16.   {
  17.     window.event.returnValue=false;
  18.     var url=window.event.srcElement.getAttribute('href');
  19.     cargarHoroscopo(url);    
  20.   }
  21.   else
  22.     if (e)
  23.     {
  24.       e.preventDefault();
  25.       var url=e.target.getAttribute('href');
  26.       agregacarrito(url);    
  27.     }
  28. }
  29.  
  30.  
  31. var conexion1;
  32. function agregarcarrito(url)
  33. {
  34.   if(url=='')
  35.   {
  36.     return;
  37.   }
  38.   conexion1=crearXMLHttpRequest();
  39.   conexion1.onreadystatechange = procesarEventos;
  40.   conexion1.open("GET", url, true);
  41.   conexion1.send(null);
  42. }
  43.  
  44. function procesarEventos()
  45. {
  46.   var detalles = document.getElementById("detalles");
  47.   if(conexion1.readyState == 4)
  48.   {
  49.     detalles.innerHTML = conexion1.responseText;
  50.   }
  51.   else
  52.   {
  53.     detalles.innerHTML = 'Cargando...';
  54.   }
  55. }
  56.  
  57. function addEvent(elemento,nomevento,funcion,captura)
  58. {
  59.   if (elemento.attachEvent)
  60.   {
  61.     elemento.attachEvent('on'+nomevento,funcion);
  62.     return true;
  63.   }
  64.   else  
  65.     if (elemento.addEventListener)
  66.     {
  67.       elemento.addEventListener(nomevento,funcion,captura);
  68.       return true;
  69.     }
  70.     else
  71.       return false;
  72. }
  73.  
  74. function crearXMLHttpRequest()
  75. {
  76.   var xmlHttp=null;
  77.   if (window.ActiveXObject)
  78.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  79.   else
  80.     if (window.XMLHttpRequest)
  81.       xmlHttp = new XMLHttpRequest();
  82.   return xmlHttp;
  83. }
Código HTML:
Ver original
  1. <div id="detalles"><a id="enlace1" href="pagina1.php?cod=1&<?php echo SID ?>&id=<?php echo $row['clave']; ?>"><img src="imajen.jpg"</a></div>
Solo cambia la imagen del primer resultado que aparece pero no me hace las acciones de php
y en los demas resultados me campia de pagina ¿en que ando mal?

Última edición por eduardodp; 16/02/2013 a las 12:08

Etiquetas: ajax, carrito, compra, php, select, sql, variables
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 07:26.