Hola tengo una situación un tanto rara. Tengo una petición asíncrona que permite ser ejecutada de manera correcta 2 veces, al intentar ejecutarla la tercera vez da error, me toca refrescar la pagina para poder volver a utilizarla, funciona nuevamente 2 veces y luego vuelve y da error en consola. mi código es el siguiente:
Tengo un array almacenado en una variable llamada $apuesta, de la siguiente manera
$apuesta = array(
"id" => $idPartido,
"cuota" => $info_apuestas_L,
"apostado" => 'local',
"equipoL" => $info_equipo_L,
"equipoV" => $info_equipo_V,
);
luego la convierto en json $apuestaJson = json_encode($apuesta);
La cual envío como json a una función .JS por medio del evento onclick();
de la siguiente manera
$apuestaJson = json_encode($apuesta);
<buttom onclick="clientes(<?= htmlspecialchars($apuestaJson) ?>)">Agregar<buttom>
Y la recibo en la función de la siguiente manera para almacenarla y enviarla de regreso al controlador PHP, con FormData atravéz de XHR:
function clientes(e) {
/* random la utilizo para enviar dato un pseudo-aleatorio en la url de la petición */
var random = Math.random(1,99);
var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXobjet('Microsoft.XMLHTTP');
var ajaxUrl = miurl+'home/controlador?rompecache='+random;
/* Creo los datos como un formulario */
var data = new FormData();
/* Codifico los datos en JSON */
data.append("array", JSON.stringify(e));
/* Configuro la petición POST, recuerda que es asíncrona */
request.open("POST", ajaxUrl, true);
request.send(data);
request.onreadystatechange = function(){
if (request.readyState != 4) return;
if (request.status == 200){
/*Linea 160, importante para el desenlace de la pregunta.*/
var objData = JSON.parse(request.responseText);
if (objData.status){
document.querySelector("#productosCarrito").innerHTML = objData.htmlCarrito;
Swal.fire({
position: 'top-end',
toast:'true',
icon: 'success',
text: objData.msg,
showConfirmButton: false,
timer: 3000,
timerProgressBar:true
});
document.getElementById(e.id+'l').disabled = true;
document.getElementById(e.id+'e').disabled = true;
document.getElementById(e.id+'v').disabled = true;
if (e.apostadoA == 'local') {
document.getElementById(e.id+'l').style.background = "#ffc107";
document.getElementById(e.id+'l').style.color = "#252f5a";
}else if (e.apostadoA == 'empate') {
document.getElementById(e.id+'e').style.background = "#ffc107";
document.getElementById(e.id+'e').style.color = "#252f5a";
}else if (e.apostadoA == 'visitante') {
document.getElementById(e.id+'v').style.background = "#ffc107";
document.getElementById(e.id+'v').style.color = "#252f5a";
}
}else{
Swal.fire({
position: 'top-end',
toast:'true',
icon: 'error',
text: objData.msg,
showConfirmButton: false,
timer: 3000,
timerProgressBar:true
});
}
}else{
Swal.fire({
icon: 'error',
title: 'Atención',
text: 'Algo salió mal, inténtalo de nuevo status == 200 falló.'
});
}
return false;
}
}
AGREGO CODIGO PHP
public function controlador()
{
if ($_POST['array']) {
/*Recibo la información que envío por medio de POST*/
$apuesta = json_decode($_POST['array'], true);
/*Inicializo el array $carrito*/
$carrito = array();
$idEvento = $apuesta['id'];
/*Creo el array con toda la información recibida que se va a agregar al carrito de compras,
strClean(); es una función que he creado para depurar la información y evitar la inyección SQL */
$arrCarrito = array(
'evento'=> strClean($apuesta['id']),
'cuota'=> strClean($apuesta['cuota']),
'equipoL'=> strClean($apuesta['equipoL']),
'equipoV'=> strClean($apuesta['equipoV']),
'tipo'=> strClean($apuesta['apuestaT']),
'apostadoA'=> strClean($apuesta['apostadoA']),
'inversion' => strClean($apuesta['inversion']),
'total' => strClean($apuesta['total']),
'fecha_evento' => strClean($apuesta['fecha'])
);
/*Valido si existe ya la variable de session, si existe entonces almaceno lo que esta contiene, en la variable array que inicialicé arriba $carrito*/
if (isset($_SESSION['carrito'])) {
$on = true;
$carrito = $_SESSION['carrito'];
for ($i=0; $i < count($carrito); $i++) {
if ($carrito[$i]['evento'] == $idEvento) {
$on = false;
}
}
if ($on) {
/*Agrego el array con la información recibida al array del carrito de compras*/
array_push($carrito, $arrCarrito);
}else{
$arrResponse = array("status" => false , "msg" => 'No puedes agregar 2 veces el mismo evento en una apuesta.' );
}
/*Actualizo la información del carrito de compras*/
$_SESSION['carrito'] = $carrito;
}
else{
/*Simplemente si no existe la variable de session aún, agrego la nueva informacion al array del carrito y luego agrego agrego su contenido a la variable de sesion.*/
array_push($carrito, $arrCarrito);
$_SESSION['carrito'] = $carrito;
}
/*$htmlCarrito contiene el html del carrito de compras para refrescar la información del carrito en el front sin recargar la página, getFile() es una función que he creado para poder requerir el archivo que contiene el html del carrito y lo envío en la respuesta al .JS la dejo aquí para que le den un vistazo también */
/*function getFile(string $url,$data)
{
require_once("views/{$url}.php");
$file = ob_get_clean();
return $file;
}*/
$htmlCarrito = getFile('templates/home/minicart', $_SESSION['carrito']);
$arrResponse = array("status" => true,
"msg" => 'Evento agregado a la colilla de apuesta',
"htmlCarrito" => $htmlCarrito
);
}
else{
$arrResponse = array("status" => false , "msg" => 'Error en la petición $_POST.' );
}
echo json_encode($arrResponse, JSON_UNESCAPED_UNICODE);
die();
}
AGREGO CODIGO CARRITO DE COMPRAS HTML
<?php
if (isset($_SESSION['carrito'])) {
$eventos = count($_SESSION['carrito']);
}else{
$eventos = 0;
}
?>
<div class="widget-head">
<h3 style="text-align:center;">MI APUESTA: <span style="font-size:12px">Eventos: <?= $eventos;?></span></h3>
<p class="name"><?php echo $user ?></p>
<p class="currency"><span><?php echo $money ?></span></p>
</div>
<?php
foreach ($_SESSION['carrito'] as $producto) {
$evento = $producto['evento'];
$cuota = $producto['cuota'];
$equipoL = $producto['equipoL'];
$equipoV = $producto['equipoV'];
$apuestaTipo = $producto['tipo'];
$apostadoA = $producto['apostadoA'];
$inversion = $producto['inversion'];
$total = $producto['total'];
$ticket = array('evento'=>$evento, 'cuota'=>$cuota );
$apuestaJson = json_encode($ticket);
?>
<div class="widget-body contain-apuesta">
<div class="pad">
<p class="titulo-pad fw900"><?= $equipoL; ?> <span>VS</span> <?= $equipoV; ?></p>
<div class="titulo-pad mt-b"><?= $apuestaTipo; ?></div>
<div class="apuesta-cuota">
<div class="ftp"><?= $cuota; ?></div>
<div class="ftp"><?= $apostadoA; ?></div>
<div onclick="dellCarrito(<?= $evento ?>);" class="ftp"><i class="fas fa-trash-alt"></i></div>
</div>
<form class="input-apuesta">
<small>Valor a postar:</small>
<input class="val-apuesta" id="<?= $evento.'invertir' ;?>" type="text" onchange="invertir(<?= htmlspecialchars($apuestaJson) ?>)" name="campoValor" value="<?= $inversion ?>">
</form>
</div>
</div>
<?php }
$riezgo = array_column($_SESSION['carrito'], 'inversion');
$suma = array_sum($riezgo);
$ganancia = array_column($_SESSION['carrito'], 'total');
$suma_utilidad = array_sum($ganancia);
$carrito = $_SESSION['carrito'];
$insertApuesta = json_encode($carrito);
?>
<div class="widget-body contain-apuesta">
<div class="pad">
<div class="apuesta-cuota">
<div class="ftp">Riezgo Total:</div>
<div class="ftp">$ <?= $suma; ?></div>
</div>
<div class="apuesta-cuota">
<div class="ftp">Ganancia:</div>
<div class="ftp">$ <?= $suma_utilidad; ?></div>
</div>
<form class="input-apuesta">
<input class="lanz-apuesta" onclick="apostar(<?= htmlspecialchars($insertApuesta) ?>);" type="button" name="campoValor" value="Lanzar Apueta">
<!-- <small onclick="vaciarCarrito();"><i class="fas fa-trash-alt"></i></small> -->
</form>
</div>
</div>
En cuanto al console.log(request.responseText);
que me pides, mientras todo funciona devuelve un JSON osea las 2 primeras veces.
{"status":true,"msg":"Evento agregado a la colilla de apuesta","htmlCarrito":"\n\n\n <div class=\"widget-head\">\n <h3 style=\"text-align:center;\">MI APUESTA: <span style=\"font-size:12px\">Eventos: 1<\/span><\/h3>\n <p class=\"name\"><\/p>\n <p class=\"currency\"><span><\/span><\/p>\n<\/div>\n\n\n<div class=\"widget-body contain-apuesta\">\n <div class=\"pad\">\n <p class=\"titulo-pad fw900\">FF Jaro <span>VS<\/span> Turku PS<\/p>\n <div class=\"titulo-pad mt-b\">Match Winner<\/div>\n <div class=\"apuesta-cuota\">\n <div class=\"ftp\">3.30<\/div>\n <div class=\"ftp\">local<\/div>\n <div onclick=\"dellCarrito(673178);\" class=\"ftp\"><i class=\"fas fa-trash-alt\"><\/i><\/div>\n <\/div>\n <form class=\"input-apuesta\">\n <small>Valor a postar:<\/small>\n <input class=\"val-apuesta\" id=\"673178invertir\" type=\"text\" onchange=\"invertir({"evento":"673178","cuota":"3.30"})\" name=\"campoValor\" value=\"0\">\n <\/form>\n <\/div>\n<\/div>\n\n \n<div class=\"widget-body contain-apuesta\">\n <div class=\"pad\">\n <div class=\"apuesta-cuota\">\n <div class=\"ftp\">Riezgo Total:<\/div>\n <div class=\"ftp\">$ 0<\/div>\n <\/div>\n <div class=\"apuesta-cuota\">\n <div class=\"ftp\">Ganancia:<\/div>\n <div class=\"ftp\">$ 0<\/div>\n <\/div>\n <form class=\"input-apuesta\">\n <input class=\"lanz-apuesta\" onclick=\"apostar([{"evento":"673178","cuota":"3.30","equipoL":"FF Jaro","equipoV":"Turku PS","tipo":"Match Winner","apostadoA":"local","inversion":"0","total":"0","fecha_evento":"24\\\/07 08:00"}]);\" type=\"button\" name=\"campoValor\" value=\"Lanzar Apueta\">\n <!-- <small onclick=\"vaciarCarrito();\"><i class=\"fas fa-trash-alt\"><\/i><\/small> -->\n <\/form>\n <\/div>\n<\/div>"}
Una vez se realiza la tercera ejecución entrega el error de abajo, y en la respuesta en Network no es un json si no que envia el HTML del carrito tal cual.
NOTA he notado que al eliminar partes del HTML del carrito me permite ejecutarlo hasta mas de 2 veces, pero a la 5 otra vez vuelve a darme el error. NOTA
Todo el codigo se ejecuta de manera correcta y la información es recibida en el controlador, al darle click la primera vez al boton que ejecuta el evento onclick();
,
la segunda vez tambien funciona de manera correcta, pero ya la tercera vez genera el siguiente error:
VM1455:4 Uncaught SyntaxError: Unexpected token < in JSON at position 4
at JSON.parse (<anonymous>)
at XMLHttpRequest.request.onreadystatechange (functions_home.js:160)
request.onreadystatechange @ functions_home.js:160
XMLHttpRequest.send (async)
clientes @ functions_home.js:156
onclick @ (index):245
esta es la linea 160:
var objData = JSON.parse(request.responseText);
Agradezco si alguien sabe que pasa y me ayuda a solucionarlo. NOTA: al refrescar la pagina me permite volver a ejecutar el evento otras 2 veces.