3

Estoy haciendo una página para una Boutique. Esta tiene que tener un sistema de administración (solamente para administrar los productos y la información de estos mismos). Estoy usando AJAX con JQuery. Tengo una página donde está mi formulario que contiene todos los datos necesarios para ingresar un nuevo producto y cuando ejecuto mi función que contiene la función $.ajax({}); me tira este error:

Uncaught TypeError: Illegal invocation
at i (jquery.min.js:2)
at jt (jquery.min.js:2)
at Function.w.param (jquery.min.js:2)
at Function.ajax (jquery.min.js:2)
at HTMLFormElement.addProduct (functions.js:70)

Hasta el momento, solo me he percatado que el error está antes de que se mande la petición a mi archivo .php ya que ni siquiera está entrando en este archivo.

Aquí dejo los archivos pertinentes para que puedan ayudarme:

add_popup.html (Este archivo se llama de manera asíncroma en el index de mi página y es mostrado como un popup):

<div class="form">
    <div id="cerrar">X</div>
    <form id="formulario_add" method="POST" enctype="multipart/form-data">
        <fieldset>
            <h1 align="center">Añadir producto</h1>
            <input type="hidden" id="codigo" name="codigo" value="001">
            <div class="descripcion">
                <label for="descrip">Descripción: </label>
                <textarea name="descrip" id="descrip" cols="30" rows="2" placeholder="Escribe la descripción del producto"></textarea>
            </div>
            <div class="precio">
                <label for="precio">Precio: </label>
                <input type="text" name="precio" id="precio" placeholder="Ingrese el precio del producto">
            </div>
            <div class="tallas">
                <label for="tallas">Tallas: </label>
                <input type="text" name="tallas" id="tallas" placeholder="Ingrese las tallas separadas por comas">
            </div>
            <div class="colores">
                <label for="colores">Colores: </label>
                <input type="text" name="colores" id="colores" list="colores_list" placeholder="Ingrese el color que destaque del producto">
                <datalist id="colores_list">

                </datalist>
            </div>
            <div class="imagen">
                <label for="imagen">Imagen: </label>
                <input type="file" name="imagen" id="imagen">
            </div>
            <div class="boton_add">
                <button type="submit" id="btn_add">Agregar producto</button>
            </div>
        </fieldset>
    </form>
</div>

<script>
    document.getElementById("formulario_add").addEventListener("submit", addProduct, false);
    document.getElementById("cerrar").addEventListener("click", function (e) {cerrarPopup("popup_add")}, false)
</script>

functions.js (aquí está la función que se ejecuta al hacer submit con el formulario):

function addProduct(e) {
    if (e.type == "submit") {
        e.preventDefault();
    }

    $.ajax({
        type: "post",
        url: "AddProductController.php",
        data: new FormData(this),
        dataType: "text",
        success: function (response) {
            console.log(response);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log("Estado: " + textStatus + ", error: " + errorThrown);
        }
    });
}

AddProductController.php (script php a ejecutarse para ingresar los datos en la BBDD):

<?php

    include_once '../Models/Conexion.php';

    $descripcion = $conexion->prepareVariableToPreparedQuery($_POST['descripcion']);
    $precio = $conexion->prepareVariableToPreparedQuery($_POST['precio']);
    $tallas = $conexion->prepareVariableToPreparedQuery($_POST['tallas']);
    $colores = $conexion->prepareVariableToPreparedQuery($_POST['colores']);
    $codigo = $_POST['codigo'];

    // Manejando imagen
    $imagen = $conexion->prepareVariableToPreparedQuery($_FILES['imagen']);
    $carpeta_destino = $_SERVER['DOCUMENT_ROOT'] . "/DalessaShop.Admin/Media/Images/Productos/";
    $extension_imagen = explode(".", $imagen['name']);
    $nombre_nuevo_imagen = $codigo . $extension_imagen[1];
    move_uploaded_file($imagen['tmp_name'], $carpeta_destino.$nombre_nuevo_imagen);

    $query = "INSERT INTO productos VALUE (null, :codigo,:descripcion,:precio,:tallas,:colores,:imagenurl)";

    try {

        $con_prep = $conexion->prepare($query);
        $con_prep->execute([
            ":codigo" => $codigo,
            ":descripcion" => $descripcion,
            ":precio" => $precio,
            ":tallas" => $tallas,
            ":colores" => $colores,
            ":imagenurl" => $carpeta_destino.$nombre_nuevo_imagen
        ]);

        if($con_prep->fetchAll() > 0){
            echo "Funcionó";
        }

    } catch (PDOException $e) {
        die("Error: ".$e->getMessage()." on line ".$e->getLine());
    }

 ?>

Conexion.php:

<?php

    class Conexion
    {
        function __construct() {
            try {
                session_start();

                $this->conexion = new PDO('mysql:host=' . $this->DB_SERVER . ';dbname=' . $this->DB_BBDD, $this->DB_USER, $this->DB_PASSWORD, $this->arrayOptions);

            } catch (PDOException $e) {

                die("Error de conexión " . $e->getMessage() . " en la línea " . $e->getLine());
            }
        }

        public function prepare($query){
            return $this->conexion->prepare($query);
        }

        public function prepareVariableToPreparedQuery($variable) {
            return htmlentities(addslashes($variable));
        }

    // Variables usadas para establecer conexión y las configuraciones pertinentes
        private $DB_SERVER = "localhost";
        private $DB_BBDD = "dalesashop";
        private $DB_USER = "root";
        private $DB_PASSWORD = "";
        public $conexion;
        private $arrayOptions = array(
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_EMULATE_PREPARES => FALSE,
            PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'",
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
        );
    }

    $conexion = new Conexion();
?>

1 respuesta 1

4

Primero: si vas a detener el envío de un formulario con e.prevendDefault() asegúrate además de retornar false

function addProduct(e) {
    if (e.type == "submit") {
        e.preventDefault();
    }

    $.ajax({...});  
    return false;
}

Segundo, si quieres mandar un elemento FormData con jQuery, hay dos salvedades (ver: https://developer.mozilla.org/es/docs/Web/Guide/Usando_Objetos_FormData)

$.ajax({
  url: "/bacjend",
  type: "POST",
  data: formdataX,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

Y yo que tú también le quitaría dataType: "text".

Emular ajax en fiddles de la web no es muy eficiente, pero te dejé algo funcionando en jsfiddle: https://jsfiddle.net/amenadiel/6pv07392/29/

4
  • ¿Porqué debo retornar false? tengo otra función que lo que hace es traer datos de mi base de datos mediante ajax (que funciona a la perfección) y también detengo el evento submit sin retornar false. Yo había puesto el dataType: "text" ya que, como puedes ver, en el archivo .php estoy imprimiendo texto para saber el estado de la consulta, cosa que ya había hecho en otra función la cual, valga la redundancia, funcionó correctamente Commented el 6 may. 2019 a las 5:03
  • Me ayudo tu respuesta, sin embargo, hay cosas que creo yo están por demás como por ejemplo el retornar false cuando se hace un e.preventDefault() o el quitar el dataType: "text". Digo esto porque la solución que necesitaba eran las opciones de proccesData: false y contentType: false. Puse exactamente esas dos solamente y me sirvió a la perfección. Creo que deberías de explicar el porque dices algo en cada respuesta, por muy lógico que pueda parecer. Sin más que decir, muchas gracias por tu ayuda. Commented el 6 may. 2019 a las 5:29
  • Debes retornar false con un preventdefault en ajax porque: "Returning false from jQuery event handlers is like calling both preventDefault() and stopPropagation()." Esto lo he sacado de: tutorialspoint.com/… Muchas veces no solo es cuestión de que la respuesta te de todas las soluciones, si no de que te indique el camino adecuado, y tu lo andes. Decirle a @amenadiel que no te explica todo es, cuanto menos, ingrato, aunque des las gracias. Haz tú trabajo de investigación también. Un saludo. Commented el 6 may. 2019 a las 7:54
  • @DiegoSaravia el preventDefault inhibe el comportamiento natural (ej, que un input de tipo submit envíe el formulario) pero no corta el flujo de eventos. En general éstos se propagan hacia arriba en el DOM y puedes tener otros listeners sobre elementos superiores que igual reaccionarán al click (por ejemplo, si el formulario es un modal) . El dataType text probablemente es inofensivo, pero va a modificar la cabecera "accept".
    – ffflabs
    Commented el 7 may. 2019 a las 3:25

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.