3

Yo intentando aprender un poco mas, hace unos meses a modo de aprendizaje desarrollé un carrito de compras muy básico, todo en PHP. Por limitaciones varias cada vez que cambio de pantalla vuelvo a recargar algunas secciones que no varían como ser encabezados y pie, lo cual me parece que no es la forma. Investigando JQuery encontré la funcion load y POST, pero no me funcionaron como imaginaba.

  1. Estoy en una pagina llamada detalle.php, aqui visualizo 1 artículo que preseleccioné y puedo ver sus características antes de cargarlo al carrito. El form es el siguiente :

<div id="detalle_titulo">
  <h3><?php echo $nombre?></h3>
</div>
<div id="detalle_foto">
  <img src="<?php echo $imagen?>" width="180px" height="180px">
</div>
<div id="detalle_precio">
  <p><strong>Precio :</strong> $
    <?php echo $precio?>
  </p>
</div>
<div id="detalle_stock">
  <p><strong>Stock :</strong>
    <?php echo $stock?>
  </p>
</div>
<div id="detalle_desc">
  <p><strong>Descripción :</strong>
    <?php echo $desc?>
  </p>
</div>
<form action="carrito.php" method="post" name="compra">
  <input name="id_txt" type="hidden" value="<?php echo $id?>" />
  <input name="nombre" type="hidden" value="<?php echo $nombre?>" />
  <input name="precio" type="hidden" value="<?php echo $precio?>" />
  <input name="cantidad" type="hidden" value="1" />
  <input name="stock" type="hidden" value="<?php echo $stock?>" />
  <?php if ($stock>0) { ?>
  <div id="detalle_caja_botones">
    <input class="boton_detalle" name="cancelar" type="submit" value="Cancelar" />
    <input class="boton_detalle" id="bbb" name="Comprar" type="submit" value="Comprar" />
  </div>
  <?php }else{ echo "Producto temporalmente agotado"; ?>
  <input class="boton_detalle" name="Cancelar" type="submit" value="Cancelar" />
  <?php } ?>

Cuando le doy click al botón que a modo de prueba le puse id="bbb" llamo a carrito.php y le paso por POST 5 valores, que luego tomo en carrito.php para agregarlos y mostrar una tabla con el pedido actualizado. De este modo, estoy recargando la web completa con todas sus secciones lo cual me gustaría evitar, ya que solo necesito mostrar una tabla y que todo lo demas quede como está. Para no perder el hilo, refresco que estoy en detalle.php y llamo a carrito.php pasandole 5 valores por POST. Quise probar cargando carrito.php como un HTML externo; En la cabecera de detalle.php agregué la libreria JQuery y lo siguiente:

< script type = "text/javascript" >
  $(document).ready(function() {
    $('#bbb').click(function(evento) {
      //evento.preventDefault();
      $(".productos").load('carrito.php');
    });
  }); 
< /script>

===================================================
.productos es el div donde quiero mostrar la tabla, primero me ocurrió que me recargaba carrito.php completa, luego probé con evento.preventDefault(); pero el problema es que no envía los 5 valores por POST.

¿Alguna sugerencia de como lograr lo que necesito? Gracias adelantadas !!!

2 respuestas 2

2

Lo que necesitas es enviar la información vía post pero a través de un ajax, el cual se encargará de cargar solo la capa (div) que tiene la data del carrito, ejemplo:


$(document).ready(function() {
    $('#bbb').click(function() {
        var action = $('#compra').attr('action'); 
        var datos = $('#compra').serialize();
        $.ajax({ 
            url: action,
            type:'post',
            data: datos,
            beforeSend: function(){ 
                $('#div').html('Cargando'); 
            },
            success: function(response){ 
                $('#div').html(response); 
            }
        }); 
    });
}); 

Recuerda a tu form usar id="compra"

Espero te sirva

Sldos

1
  • Recuerda añadir el evento.preventDefault(); sino el formulario irá a la página donde el action esté apuntando
    – Zander
    el 19 oct. 2016 a las 6:53
1

Le estás pegando a alguna base de datos? Si es así tendrías que mandar un post a la url. Después por get tenes la info. Con él load cargarías de forma dinámica también pero haciendo referencia a un file

1
  • Muchas gracias ! Me sirvió !
    – look68
    el 20 oct. 2016 a las 2:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.