Lo que estoy intentando es dejar de usar JQUERY para las consultas asincronas, para eso decidi usar la API Fetch de JS , mi problema consiste en que una vez devuelto los datos de la BD , a la tabla en la cual se muestran estos datos no le funciona el boton "EDITAR"
index.php aca listo los productos con sus respectivos botones EDITAR y ELIMINAR (FUNCIONAN)
[code=html4strict]<div id="verTablaPremium">Tabla Premium</div>
<div class="contenedor_tabla">
<table class="contenedor_tabla_table">
<tr>
<th>Foto</th>
<th>Nombre</th>
<th>Pack</th>
<th>Desc Menu</th>
<th>Desc Producto</th>
<th>Precio</th>
<th>Editar</th>
<th>Eliminar</th>
</tr>
<?php
$item = null;
$valor = null;
$cPacks = ControladorPacks::ctrMostrarPacks($item,$valor);
foreach ($cPacks as $key => $value) {
echo '<tr>
<td><img src="./vistas/img/packspremium/'.$value["nombre"].'+'.$value["pack"].'/320/'.$value["foto"].'"></td>
<td>'.$value["nombre"].'</td>
<td>'.$value["pack"].'</td>
<td>'.$value["descripcion"].'</td>
<td>'.$value["descripciondos"].'</td>
<td>'.$value["precio"].'</td>
<td><button class="botones__editar btnEditarPack" idPack="'.$value["id_premium"].'"> <i class="fas fa-pencil-alt"></i></button></td>
<td><button class="botones__eliminar btnEliminarBurguer" idBurguer="'.$value["id_premium"].'" fotoBurguer="'.$value["foto"].'" nombreBurguer="'.$value["nombre"].'" pack="'.$value["pack"].'"> <i class="fas fa-trash-alt"></i></button> </td>
</tr>';
}
$borrarBurguer = new ControladorPacks();
$borrarBurguer -> ctrBorrarBurguer();
?>
</table>[/code]
Luego en mi JS para hacer la llamada a la db tengo esto.
[code=javascript]var formulario = document.getElementById("formEnkel")
var tr = document.getElementById("refresh")
let boton = Array.from(document.querySelectorAll('.btnEditarPackEnkel'))
let evento = e =>{
/* relleno el formulario del modal con los datos traidos de la BD */
if(e.target.tagName == "I"){
idPackEnkel = e.target.parentNode.getAttribute("idPackEnkel");
let datos = new FormData(formulario);
datos.append("idPackEnkel", idPackEnkel);
//console.log(datos.get('idPackEnkel'))
fetch("ajax/enkel.ajax.php",{
method:"POST",
body:datos
})
.then( res => res.json())
.then( data => {
document.getElementById('fotoActualBEnkel').value = data.foto
document.getElementById('editarNombrePEnkel').value = data.nombre
document.getElementById('editarDescripcionEnkel').value = data.descripcion
document.getElementById('editarDescripcionDosEnkel').value = data.descripciondos
document.getElementById('id_enkel').value = data.id_enkel
document.getElementById('nombreActualEnkel').value = data.nombre
if(data.foto != ""){
document.querySelector('.previsualizarBEnkel').setAttribute("src","./vistas/img/packsenkel/"+data.nombre+"/320/"+data.foto+"")
}
})
}
}
tr.addEventListener('click',evento,true);
/* CUANDO hago el submit traigo la respuesta de la db para llenar la tabla con los datos actualizados */
formulario.addEventListener('submit',(e) =>{
e.preventDefault();
let datos = new FormData(formulario);
fetch("ajax/submit.ajax.php",{
method:"POST",
body:datos
})
.then( res => res.text())
.then(data =>{
formulario.reset();
tr.innerHTML = data;
})
})[/code]
SUBMIT.AJAX.PHP
[code=php]<?php
require_once "../controladores/enkel.controlador.php";
require_once "../modelos/enkel.modelo.php";
$e = new ControladorPacksEnkel();
$e->ctrEditarEnkel();
[/code]
en el controlador que devuelve todos los datos actualizados en cuestion tengo esto
[code=php]$respuesta = ModeloPacksEnkel::mdlEditarEnkel($tabla, $datos);
if($respuesta == "ok"){
$item = null;
$valor = null;
$ePacks = ControladorPacksEnkel::ctrMostrarPacksEnkel($item,$valor);
echo ' <tr>
<th>Foto</th>
<th>Nombre</th>
<th>Desc Menu</th>
<th>Desc Prod</th>
<th>Precio</th>
<th>Editar</th>
<th>Eliminar</th>
</tr>';
foreach ($ePacks as $key => $value) {
echo '<tr>
<td><img src="./vistas/img/packsenkel/'.$value["nombre"].'/320/'.$value["foto"].'"></td>
<td>'.$value["nombre"].'</td>
<td>'.$value["descripcion"].'</td>
<td>'.$value["descripciondos"].'</td>
<td>'.$value["precio"].'</td>
<td><button class="botones__editar btnEditarPackEnkel" idPackEnkel="'.$value["id_enkel"].'"> <i class="fas fa-pencil-alt"></i></button></td>
<td><button class="botones__eliminar btnEliminarBurguerEnkel" idBurguerEnkel="'.$value["id_enkel"].'" fotoBurguerEnkel="'.$value["foto"].'" nombreBurguerEnkel="'.$value["nombre"].'"> <i class="fas fa-trash-alt"></i></button> </td>
</tr>
';
};
}
[/code]
repito, la primera vez que apreto en editar funciona, despues hago el submit, los datos se muestran perfectamente pero el boton editar no funciona, lei algo de la propagacion de eventos y que con jquery se soluciona con el evento " .ON ". pero no le encuentro la solucion , desde ya muchas gracias.