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();
?>