2

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({&quot;evento&quot;:&quot;673178&quot;,&quot;cuota&quot;:&quot;3.30&quot;})\" 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([{&quot;evento&quot;:&quot;673178&quot;,&quot;cuota&quot;:&quot;3.30&quot;,&quot;equipoL&quot;:&quot;FF Jaro&quot;,&quot;equipoV&quot;:&quot;Turku PS&quot;,&quot;tipo&quot;:&quot;Match Winner&quot;,&quot;apostadoA&quot;:&quot;local&quot;,&quot;inversion&quot;:&quot;0&quot;,&quot;total&quot;:&quot;0&quot;,&quot;fecha_evento&quot;:&quot;24\\\/07 08:00&quot;}]);\" 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.

7
  • La página que llamas devuelve algo que no es JSON, tendrías que mirar que mensaje devuelve la página.
    – Juan
    Commented el 23 jul. 2021 a las 22:11
  • si, la cosa es que la primera y segunda vez si lo devuelve bien, he estado leyendo y encuentro algo de ponerle cache = false, sabes como podría agregar ese pedacito? Commented el 23 jul. 2021 a las 22:17
  • 4
    Pero si ves el mensaje que envía la página a la tercera petición podrás intentar saber la causa del fallo y tratar de solucionarlo.
    – Juan
    Commented el 23 jul. 2021 a las 23:31
  • Gracias por responder, acabo de mirar la respuesta y esta enviando html del carrito de compras en la respuesta, mas no la respuesta json, las 2 primeras veces envía la respuesta json, y la tarcera envia el html del carrito, sabes que esta pasando ahi? Commented el 24 jul. 2021 a las 3:10
  • 1
    El mayor problema aquí es que estás mezclando cosas. Si en la petición Ajax has indicado que esperas un JSON bajo ningún concepto debes mostrar por pantalla en ningún momento ningún contenido que no sea un JSON válido. Para ello controla el flujo del código y emite en respuesta el JSON sin tener que entrar en historias de limpieza de buffer y demás.
    – A. Cedano
    Commented el 28 jul. 2021 a las 15:49

1 respuesta 1

11

He solucionado el error después de buscar tanto, resulta que decidí recorrer mi código linea por linea para ir depurando y de esta manera encontré el error.

El error estaba en la función PHP que había creado para requerir el archivo que contenía el html del carrito de compras. debido a que como no estaba inicializando "ob" con ob_start(), mi archivo html no se estaba cargando el buffer y por lo parece que se rompiera después de la segunda vez que se ejecutaba el codigo. La solución entonces simplemente fue inicializar "ob" así

/*Función con error*/
function getFile(string $url,$data)
    {
        require_once("views/{$url}.php");
        $file = ob_get_clean();
        return $file;
    }

Solución:

function getFile(string $url,$data)
        {
            ob_start();/* SOLUCIÓN */
            require_once("views/{$url}.php");
            $file = ob_get_clean();
            return $file;
        }
1
  • ¿Y cuál era el motivo por el que ese código hacía su trabajo correctamente dos veces y a la tercera no? La ejecución de cada llamada es independiente una de otra, por lo que si ese era el fallo, debería haber fallado todas las veces. Commented el 2 ago. 2021 a las 5:37

Tu Respuesta

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

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