estuve haciendo un carrito de compras en donde cree una sección en la que podes cambiar la cantidad de los productos elegidos, al principio lo habia hecho con un form normal, pero despues me decidí a hacerlo con ajax, asi el usuario no tiene la necesidad de esperar a que el formulario se recargué, el problema es que el ajax solo funciona la primera vez, ya a la segunda se ejecuta el formulario normal sin el ajax, el código del ajax es este:
<script>
$('.actform').on('submit', function(ev) {
var id2 = $(this);
$.ajax({
type: $(id2).attr('method'),
url: $(id2).attr('action'),
data: $(id2).serialize(),
success: function(data) {
$('.container').load(' .container');
},
error: function() {
alert('Ha ocurrido un error');
}
});
ev.preventDefault();
});
</script>
el problema de que a la seguna vez el formulario se ejecute el ajax lo soluciones simplemente cambiando el $('.container').load( '.container');
por $('.container').load(window.location.reload(false));
. Y queria saber si existe alguna otra forma de hacer esto porque al usar el window.location.reload(false)
la pagina se reinicia pero queda muy forzado el reinicio.
El código del carrito es este por si lo necesitan ver:
<main id="main" class="main">
<?php if(!empty($_SESSION['cart'])){ ?>
<div class="container">
<h2 class="carrito-title">Mi Carrito</h2>
<div class="container2">
<div class="container-cart">
<table>
<thead>
<tr>
<th class="product-image">Imagen</th>
<th class="product-name">Producto</th>
<th class="product-price">Precio</th>
<th class="product-quantity">Cantidad (Modificar)</th>
<th class="product-total">Total</th>
<th class="product-remove">Eliminar</th>
</tr>
</thead>
<tbody>
<?php
$total= 0;
foreach($_SESSION['cart'] as $indice=>$producto){
$ID = $producto['ID'];
$select_products = $connect->prepare("SELECT * FROM `productos` WHERE id=$ID") or die('query failed');
$select_products->execute();
$list_products = $select_products->fetchAll(PDO::FETCH_ASSOC);
foreach($list_products as $product){
$nombre= $product['nombre'];
$precio= $product['precio'];
$codigo = $product['codigo'];
$imagen = "media/productos/$codigo.png";
?>
<tr>
<td class="product-image">
<img src="<?php echo $imagen?>" alt="<?php $nombre?>">
</td>
<td class="product-name">
<h2 class="name"><?php echo $nombre?></h2>
</td>
<td class="product-price"><h2 class="precio">$<?php echo number_format($precio, 0, ',', '.') ; ?></h2></td>
<td class="product-quantity">
<form action="backend/actProduct.php" method="post" class="actform" id="<?php echo $ID ?>">
<div class="cantidad">
<div class="cantidad-container">
<input type="hidden" name="id" min="1" value="<?php echo openssl_encrypt($ID,COD,KEY);?>">
<input type="number" class="nro updateCant" onchange="btnCart.click()" name="cantidadupd" value="<?php echo $producto['CANTIDAD'];?>">
<button name="btnCart" value="Update" type="submit" class="actualizar"><i class="fa-solid fa-rotate"></i></button>
</div>
</div>
</form>
</td>
<?php
$sub_total = $precio * $producto['CANTIDAD'];
$total = $total + $sub_total;
?>
<td><h2 class="subtotal">$<?php echo number_format($sub_total, 0, ',', '.'); ?></h2></td>
<td>
<form action="backend/deleteProduct.php" method="post">
<input type="hidden" name="id" value="<?php echo openssl_encrypt($ID,COD,KEY);?>">
<button class="delete" name="btnCart" type="submit" value="Remove" onclick="return confirm('Seguro que quieres eliminar este artículo?');">X</button>
</form>
</td>
</tr>
<?php
}};
?>
</tbody>
</table>
</div>
<?php if(isset($_SESSION['cart'])){ ?>
<div class="nocart">
<div class="final">
<h5 class="final-price preciofinal">Precio sin Impuestos: $<?php echo number_format($total, 0, ',', '.');?></h5>
<form action="backend/emptyCart.php" method="post" class="emptyform" id="<?php echo $ID ?>">
<input type="hidden" name="empty">
<button name="btnCart" type="submit" class ="vaciar" value="Empty" onclick="return confirm('¿Desea vaciar el carrito?');">Vaciar carrito</button>
</form>
</div>
<?php
if ($rol=='representante'){
?>
<div class="checkout">
<form action="productos.php">
<button name="btnFinCart" class="seguircomprando-btn">Seguir comprando</button>
</form>
<a class="checkout-btn" href="clientes.php">Seleccionar cliente</a>
</div>
<?php
}else{?>
<div class="checkout">
<form action="productos.php">
<button name="btnFinCart" class="seguircomprando-btn">Seguir comprando</button>
</form>
<form action="backend/fincompra.php" method="post" onsubmit="showLoad()">
<button name="btnFinCart" class ="checkout-btn" onclick="return confirm('¿Está seguro que desea finalizar la compra?');" value="Fin" >Finalizar compra</button>
</form>
</div>
<?php
}
?>
</div>
</div>
<?php }?>
</div>
<?php }else{
echo '
<div class="nosesion">
<h2 class="cartvacio">El carrito esta vacío</h2>
<a class="comprar-btn" href="productos.php">Comprar ahora</a>
</div>
';
}?>
</main>
actProduct.php :
<?php
if(!isset($_SESSION)) {
session_start();
};
include 'connect.php';
include 'config.php';
if (isset($_POST['id'])) {
if(is_numeric(openssl_decrypt( $_POST['id'], COD, KEY))){
$ID=openssl_decrypt($_POST['id'],COD,KEY);
foreach($_SESSION['cart'] as $indice=>$producto){
if($producto['ID']==$ID){
if($_POST['cantidadupd']<1){
$_SESSION['cart'][$indice]['CANTIDAD']= 1;
}else{
$_SESSION['cart'][$indice]['CANTIDAD'] = $_POST['cantidadupd'];
}
}
}
}
header('location: ../cart.php');
}else{
echo '<script>alert("Ha ocurrido un error"); window.location = "../cart.php";</script>';
exit;
}
$('.container').load('.container')
? A.load()
tenés que pasarle una URL no un selector. Qué es lo que estás queriendo hacer concretamente? Entiendo que hacés una consulta a través de AJAX, pero qué querés hacer con la respuesta? Qué es concretamente lo que te devuelve esa consulta?