¡Hola! Tengo un select
html que necesito rellenar automáticamente al cargar el formulario. No es de los que se cargan en base a un select fijo. Contendrá las categorías a las que pertenece una nueva subcategoría. Dichas categorías vienen de la base de datos. Estoy tratando de hacerlo todo con fetch()
de javascript.
Logro que me llegue la información correctamente y la muestro por consola y hasta me muestra ya sea el innerHTML
de cómo se supone que ha quedado ese select
o por separado el text
y el value
sin ningún problema...
He probado así...
//Detectamos el formulario y lo guardamos en una constante
const formulario = document.querySelector('#formularioCrearSubcategoria');
//Vamos a rellenar el select automáticamente.
const select = document.querySelector("#nombreCategoria"); //Obtenemos el select
var url = "../Modelo/CRUD_Categorias_Modelo.php"; //Si no recibe parámetros, devuelve todas las categorías
fetch(url, {
method: 'POST',
data: select
})
.then(res => res.json())
.then(lista_de_categorias => {
console.log("Las categorías son:",lista_de_categorias);
for(let categoria of lista_de_categorias) {
let nuevaOpcion = document.createElement("option");
nuevaOpcion.value = categoria.ID_CATEGORIA;
nuevaOpcion.text = categoria.NOMBRE_CATEGORIA;
select.add(nuevaOpcion);
alert(select.options[0].text);
alert(select.options[1].text);
alert(select.innerHTML);
console.log(select.options[0].text); // Selecciona categoría padre
console.log(select.options[1].text);// Test
console.log(select.innerHTML); /* Resultado en consola:
<option value="-">Selecciona categoría padre</option>
<option value="3">Test</option>
*/
}
})
.catch(function (error) {
console.error("¡Error!", error);
})
Mismo resultado usando select.appendChild(nuevaOpcion)
en lugar de select.add(nuevaOpcion)
.
También he probado así (dentro del for
, escribiendo el siguiente código), que para mostrar en una tabla todos los datos me funciona sin fallos:
select.innerHTML +=
`
<option value="${categoria.ID_CATEGORIA}">${categoria.NOMBRE_CATEGORIA}</option>
`;
Lo de +=
es porque quiero que la la primera , la que no tiene ningún id de categoría asignado a su valor, sino un -, se mantenga.
Sin embargo de todas esas maneras tengo exactamente el mismo resultado por consola o alert, pero en el resultado de la página NADA CAMBIA. Ni visualmente, ni en el código interno, ni nada...
Obtengo EXACTAMENTE el mismo resultado creando una función constante fuera del fetch
y de su correspondiente catch
a la que le pongo el mismo for
para la lista que recibe como parámetro.
.then(lista_de_categorias => {
console.log("Las categorías son:",lista_de_categorias);
mostrar_categorias_en_select(lista_de_categorias);
})
La función constante:
const mostrar_categorias_en_select = (lista) => {
for(let categoria of lista) {
select.innerHTML +=
`
<option value="${categoria.ID_CATEGORIA}">${categoria.NOMBRE_CATEGORIA}</option>
`;
alert(select.options[0].text);
alert(select.options[1].text);
alert(select.innerHTML);
console.log(select.options[0].text);
console.log(select.options[1].text);
console.log(select.innerHTML);
}
}
Mismo resultado en las otras 2 opciones de código que he comentado arriba.El archivo javascript es llamado al final de la página justo antes de añadir el pie de página. Con lo cuál el formulario ya ha terminado de cargar y se supone que puede empezar a modificarse.
3 días atascado sin lograr nada por más vueltas que le doy al código.
¡Muchas gracias por adelantado!
AÑADO EL HTML COMPLETO QUE INCLUYE EL FORMULARIO
<body>
<h1>Artesanía Los Grande</h1>
<h2>¡Bienvenid@s a Artesanía Los Grande</h2>
<div class="contenedor_modal">
<div class="ventana_modal">
<div class="cerrar_modal">X</div>
<h1>Editar Subcategoría</h1>
<form id="formularioActualizarSubcategoria">
<input type="text" name="operacion" value="actualizar" hidden>
<h3 id="idSubcategoriaH">Id</h3>
<select name="nombreCategoria" id="nombreCategoria">
<option value="-">Selecciona categoría padre</option>
</select>
<input type="text" name="nombreSubcategoria" id="nombreSubcategoria" class="input_form">
<input type="text" name="descripcionSubcategoria" id="descripcionSubcategoria" class="input_form">
<input type="input" name="imagenPrincipalSubcategoria" id="imagenPrincipalSubcategoria" class="input_form">
<input type="input" name="imagen2" id="imagen2" class="input_form"><br>
<input type="input" name="imagen3" id="imagen3" class="input_form">
<input type="input" name="imagen4" id="imagen4" class="input_form"><br>
<input type="input" name="imagen5" id="imagen5" class="input_form">
<input type="input" name="imagen6" id="imagen6" class="input_form">
<button type="submit" class="boton_form">Actualizar categoría</button>
<button type="button" id="cancelar" class="boton_form">Cancelar</button>
</form>
</div>
</div>
<!-- <div class="contenedor_modal">
<div class="ventana_modal">
<div class="cerrar_modal">X</div>
<h1>Editar Subcategoría</h1>
<form id="formularioActualizarSubcategoria"><br>
<input type="text" name="operacion" value="actualizar" hidden>
<h3 id="idSubcategoriaH">Id</h3>
<input type="text" name="nombreSubcategoria" id="nombreSubcategoria" class="input_form">
<input type="text" name="descripcionSubcategoria" id="descripcionSubcategoria" class="input_form">
<input type="input" name="imagenPrincipalSubcategoria" id="imagenPrincipalSubcategoria" class="input_form">
<input type="input" name="imagen2" id="imagen2" class="input_form"><br>
<input type="input" name="imagen3" id="imagen3" class="input_form">
<input type="input" name="imagen4" id="imagen4" class="input_form"><br>
<input type="input" name="imagen5" id="imagen5" class="input_form">
<input type="input" name="imagen6" id="imagen6" class="input_form">
<button type="submit" class="boton_form">Actualizar categoría</button>
<button type="button" id="cancelar" class="boton_form">Cancelar</button>
</form>
</div>
</div> -->
<table><br>
<thead>
<th>Id</th>
<th>Nombre de Categoría</th>
<th>Nombre de Subcategoría</th>
<th>Descripción</th>
<th>Imagen Principal</th>
<th>Imagen 2</th>
<th>Imagen 3</th>
<th>Imagen 4</th>
<th>Imagen 5</th>
<th>Imagen 6</th>
<th>Acciones</th>
</thead>
<tbody id="tabla_subcategorias">
<?php
require_once $carpetas.'Controlador/Subcategorias_Controlador.php';
$sentencia = new Subcategorias();
$Subcategorias = $sentencia->getTodasLasSubategorias();
if(!$Subcategorias) {
echo '<tr align="center">
<td colspan="11">No existe ninguna categoría actualmente.</td>
</tr>';
} else {
foreach($Subcategorias as $Subcategoria) {
$id = $Subcategoria['ID_SUBCATEGORIA'];
$nombreCategoria = $subcategoria['ID_CATEGORIA'];
$nombre = $Subcategoria['NOMBRE_SUBCATEGORIA'];
$descripcion = $Subcategoria['DESCRIPCION_SUBCATEGORIA'];
$imagenPrincipal = $Subcategoria['IMAGEN_PRINCIPAL_SUBCATEGORIA'];
$imagen2 = $Subcategoria['IMAGEN2'];
$imagen3 = $Subcategoria['IMAGEN3'];
$imagen4 = $Subcategoria['IMAGEN4'];
$imagen5 = $Subcategoria['IMAGEN5'];
$imagen6 = $Subcategoria['IMAGEN6'];
echo "<tr>";
echo "<td>" . $id . "</td>";
echo "<td>" . $nombreCategoria . "</td>";
echo "<td>" . $nombreSubcategoria . "</td>";
echo "<td>" . $descripcion . "</td>";
echo "<td>" . $imagenPrincipal . "</td>";
echo "<td>" . $imagen2 . "</td>";
echo "<td>" . $imagen3 . "</td>";
echo "<td>" . $imagen4 . "</td>";
echo "<td>" . $imagen5 . "</td>";
echo "<td>" . $imagen6 . "</td>";
echo "<td>
<button onclick = 'editar($id)'>Editar</button>
<button onclick = 'eliminar($id)'>Eliminar</button>
</td>";
echo "</tr>";
}
}
?>
</tbody>
</table>
<h1>Nueva Subcategoría</h1>
<form id="formularioCrearSubcategoria">
<input type="text" name="operacion" value="crear" hidden>
<h3 id="idSubcategoriaH"></h3>
<input type="text" name="nombreSubcategoria" id="nombreSubcategoria" placeholder="Ingresa el nombre de la categoría" class="input_form">
<select name="nombreCategoria" id="nombreCategoria" class="input_form">
<option value="-">Selecciona categoría padre</option>
</select>
<input type="text" name="descripcionSubcategoria" id="descripcionSubcategoria" placeholder="Descripción de la categoría" class="input_form">
<input type="file" name="imagenPrincipalSubcategoria" id="imagenPrincipalSubcategoria" class="input_form">
<input type="file" name="imagen2" id="imagen2" class="input_form"><br>
<input type="file" name="imagen3" id="imagen3" class="input_form">
<input type="file" name="imagen4" id="imagen4" class="input_form"><br>
<input type="file" name="imagen5" id="imagen5" class="input_form">
<input type="file" name="imagen6" id="imagen6" class="input_form"><br>
<button type="submit">Crear subcategoría</button>
</form>
<!-- <form id="formularioCrearSubcategoria"><br>
<input type="text" name="operacion" value="crear" hidden>
<h3 id="idSubcategoriaH"></h3>
<input type="text" name="nombreSubcategoria" id="nombreSubcategoria" placeholder="Ingresa el nombre de la categoría" class="input_form">
<input type="text" name="descripcionSubcategoria" id="descripcionSubcategoria" placeholder="Descripción de la categoría" class="input_form">
<input type="file" name="imagenPrincipalSubcategoria" id="imagenPrincipalSubcategoria" class="input_form">
<input type="file" name="imagen2" id="imagen2" class="input_form"><br>
<input type="file" name="imagen3" id="imagen3" class="input_form">
<input type="file" name="imagen4" id="imagen4" class="input_form"><br>
<input type="file" name="imagen5" id="imagen5" class="input_form">
<input type="file" name="imagen6" id="imagen6" class="input_form"><br>
<button type="submit">Crear categoría</button>
</form> -->
<script src="<?php echo $carpetas ?>js/funciones_AdminSubcategorias.js"></script>
AÑADO EL SCRIPT COMPLETO
//Detectamos el formulario y lo guardamos en una constante
const formulario = document.querySelector('#formularioCrearSubcategoria');
//Vamos a rellenar el select automáticamente.
const select = document.querySelector("#nombreCategoria"); //Obtenemos el select
//var url = "../Modelo/CRUD_Categorias_Modelo.php";
const url = 'https://jsonplaceholder.typicode.com/users'; // @hawk lo puso como ejemplo para comprobar si funciona.
fetch(url, {
method: 'GET'
})
.then(res => res.json())
.then(lista_de_categorias => {
console.log("Las categorías son:",lista_de_categorias);
alert('HAY ' + lista_de_categorias.length);
for (let categoria of lista_de_categorias) {
let nuevaOpcion = document.createElement("option");
nuevaOpcion.value = categoria.id;
nuevaOpcion.text = categoria.name;
//select.add(nuevaOpcion);
select.appendChild(nuevaOpcion); //<-- Así tambien funciona
/*select.innerHTML +=
`
<option value="${categoria.id}">${categoria.name}</option>
`;*/
alert(select.options[0].text);
alert(select.options[1].text);
alert(select.innerHTML);
console.log(select.options[0].text);
console.log(select.options[1].text);
console.log(select.innerHTML);
}
//mostrar_categorias_en_select(lista_de_categorias);
})
.catch(function (error) {
console.error("¡Error!", error);
})
const mostrar_categorias_en_select = (lista) => {
console.log(lista);
for(let categoria of lista) {
//document.body.createElement("option");select.innerHTML +=
console.log(categoria);
let nuevaOpcion = document.createElement("option");
nuevaOpcion.value = categoria.ID_CATEGORIA;
nuevaOpcion.text = categoria.NOMBRE_CATEGORIA;
select.add(nuevaOpcion);
/*alert(select.options[0].text);
alert(select.options[1].text);
alert(select.innerHTML);
console.log(select.options[0].text);
console.log(select.options[1].text);
console.log(select.innerHTML);*/
//select.innerHTML = "";
/* var miOption =*/
/*select.innerHTML +=
`
<option value="${categoria.ID_CATEGORIA}">${categoria.NOMBRE_CATEGORIA}</option>
`;*/
alert(select.options[0].text);
alert(select.options[1].text);
alert(select.innerHTML);
console.log(select.options[0].text);
console.log(select.options[1].text);
console.log(select.innerHTML);
}
}
//Queremos escuchar el botón de enviar (el submit)
formulario.addEventListener('submit', (e) => {
//Con e prevenimos su acción por defecto para que no se envíe
e.preventDefault();
//Añadimos los datos del formulario a una variable de tipo FormData (datos de formulario)
const datosDelFormulario = new FormData(formulario);
//con .get() podemos obtener el valor del input deseado.
//var nombre = datosDelFormulario.get('nombreSubcategoria');
//alert(nombre);
//Creamos una variable que contendrá la dirección donde deberá enviarse el formulario.
var url = "../Modelo/CRUD_Subcategorias_Modelo.php";
//Declaramos fetch con la URL y un json que contiene el método de comunicación, que es POST y el cuerpo, que es el formData que creamos antes.
fetch(url, {
method: 'POST',
body: datosDelFormulario
})
.then(res => res.json()) // La respuesta, que es una lista de actualizada de todas las categorías, incluida la que se acaba de crear, la transformamos en un objeto json.
.then(lista_de_subcategorias => {
/* for (var i = 0; i < lista_de_categorias.length; i++) {
console.log(i, lista_de_subcategorias.charAt(i), lista_de_subcategorias.charCodeAt(i));
} */
// Mostramos por consola que se ha recibido satisfactoriamente la lista de subcategorías, junto con el json transformado.
console.log("Datos recibidos:", lista_de_subcategorias);
mostrar_subcategorias_en_tabla(lista_de_subcategorias); //Le pasamos la lista de categorías a la función mostrar_categorias_en_tabla para que las muestre.
formulario.reset();//Finalmente, borramos el formulario.
})
.catch(function(error){ // Comprobamos si ha habido algún error en alguna de las promesas anteriores o en el propio fetch.
console.error('¡Error!', error); // Avisamos del error y lo mostramos.
})
});
//Creamos una constante que mostrará la tabla rellena con todas las categorías obtenidas de la base de datos.
const mostrar_subcategorias_en_tabla = (subcategorias) => {
let tabla_subcategorias = document.querySelector('#tabla_subcategorias');//Aquí guardamos la tabla, concretamente su body, para operar sobre ella.
tabla_categorias.innerHTML = ""; //Borramos el contenido del cuerpo de la tabla.
console.log(subcategorias);
//Añadiremos la correspondiente información de cada subcategoria que haya en la lista. Añadimos sendos botones a cada categoria para editarla o eliminarla.
for(let subcategoria of subcategorias) {
tabla_categorias.innerHTML +=
`
<tr>
<td>${subcategoria.ID_SUBCATEGORIA}</td>
<td>${subcategoria.ID_CATEGORIA}</td>
<td>${subcategoria.NOMBRE_SUBCATEGORIA}</td>
<td>${subcategoria.DESCRIPCION_SUBCATEGORIA}</td>
<td>${subcategoria.IMAGEN_PRINCIPAL_SUBCATEGORIA}</td>
<td>${subcategoria.IMAGEN2}</td>
<td>${subcategoria.IMAGEN3}</td>
<td>${subcategoria.IMAGEN4}</td>
<td>${subcategoria.IMAGEN5}</td>
<td>${subcategoria.IMAGEN6}</td>
<td>
<button onclick="editar(${subcategoria.ID_SUBCATEGORIA})">Editar</button>
<button onclick="eliminar(${subcategoria.ID_SUBCATEGORIA})">Eliminar</button>
</td>
</tr>
`;
}
}
//Creamos una constante para el primer paso de la edicción de una subcategoría. Se encargará de obtener los datos de esa categoría según su id. Se los pasará a una segunda función de este proceso para guardar los cambios.
const editar = (id) => {
//alert(id);
var url = "../Modelo/CRUD_Subcategorias_Modelo.php";
var datosDelFormulario = new FormData();
datosDelFormulario.append('operacion', 'editar');
datosDelFormulario.append('id', id);
fetch(url, {
method: 'POST',
body: datosDelFormulario
})
.then(datosSubategoria => datosSubategoria.json())
.then(subcategoria => {
console.log('Has elegido a esta subcategoría:', subcategoria);
actualizarSubcategoria(subcategoria);
})
.catch(function (error) {
console.log("¡Error!", error);
})
}
//Segunda parte para editar una persona. Recibe los datos de esta persona y los muestra en una ventana modal, dando opción a cambiar todos menos el id, guardar los cambios si ha habido alguno, y actualizar la lista para mostrar los cambios... Y cerrabdi la ventana modal.
const actualizarSubcategoria = (subcategoria) => {
const contenedor_modal = document.querySelector('.contenedor_modal');//Es la capa externa de la ventana modal.
const formularioActualizar = document.querySelector('#formularioActualizarSubcategoria');//El contenido de la ventana modal es éste formulario
const boton_cancelar = document.querySelector('#cancelar');//Obtenemos el botón cancelar.
const x_cerrar = document.querySelector('.cerrar_modal');//... Y la X de cerrar
const idCategoriaH = document.querySelector('#idSubcategoriaH');//Así como un h2 informativo
//alert(formularioActualizar.nombre.value);
//Creamos sendas variables locales con los datos de la categoría
let idSubcategoria = subcategoria[0].ID_SUBCATEGORIA;
let nombreCategoria = subcategoria[0].ID_CATEGORIA;
let nombreSubcategoria = subcategoria[0].NOMBRE_SUBCATEGORIA;
let descripcionSubcategoria = subcategoria[0].DESCRIPCION_CATEGORIA;
let imagenPrincipalSubcategoria = subcategoria[0].IMAGEN_PRINCIPAL_CATEGORIA;
let imagen2 = subcategoria[0].IMAGEN2;
let imagen3 = subcategoria[0].IMAGEN3;
let imagen4 = subcategoria[0].IMAGEN4;
let imagen5 = subcategoria[0].IMAGEN5;
let imagen6 = subcategoria[0].IMAGEN6;
//Mostramos la ventana modal
//.body.appendChild(contenedor_modal);
contenedor_modal.style.display = "block";
//Rellenamos el formulario
//console.log(persona);
idSubategoriaH.innerHTML = `Id: ${idSubcategoria}`;
formularioActualizar.nombreCategoria.value = nombreCategoria;
formularioActualizar.nombreSubcategoria.value = nombreSubcategoria;
formularioActualizar.descripcionSubcategoria.value = descripcionSubcategoria;
formularioActualizar.imagenPrincipalSubcategoria.value = imagenPrincipalSubctegoria;
formularioActualizar.imagen2.value = imagen2;
formularioActualizar.imagen3.value = imagen3;
formularioActualizar.imagen4.value = imagen4;
formularioActualizar.imagen5.value = imagen5;
formularioActualizar.imagen6.value = imagen6;
//Si no hay ningún cambio, cerramos el modal. Si se ha modificado algo, preguntamos si realmente desea cerrar el modal, descartando los cambios, o seguir editando.
const comprobar_cambios = () => {
formularioActualizar.imagen2.value = imagen2;
if(formularioActualizar.nombreCategoria.value !== nombreCategoria || formularioActualizar.nombreSubcategoria.value !== nombreSubcategoria || formularioActualizar.descripcionSubcategoria.value !== descripcionSubcategoria || formularioActualizar.imagenPrincipalSubcategoria.value !== imagenPrincipalSubcategoria || formularioActualizar.imagen2.value !== imagen2 || formularioActualizar.imagen3.value !== imagen3 || formularioActualizar.imagen4.value !== imagen4 || formularioActualizar.imagen5.value !== imagen5|| formularioActualizar.imagen6.value !== imagen6) {
if(confirm("Has realizado cambios ¿Deseas cerrar sin guardarlos?")) {
contenedor_modal.style.display = "none";
}
} else {
contenedor_modal.style.display = "none";
}
}
//Si el botón cancelar (o la X de cerrar) se presiona, cerrará el modal, escondiéndolo, o nos dará opción a seguir editando según la función descrita arriba...
boton_cancelar.addEventListener('click', () => {
comprobar_cambios();
//document.body.removeChild(contenedor_modal);
})
x_cerrar.addEventListener('click', () => {
comprobar_cambios();
})
formularioActualizar.addEventListener('submit', (e) => {
nombreCategoria = formularioActualizar.nombreCategoria.value;
nombreSubcategoria = formularioActualizar.nombreSubcategoria.value;
descripcionSubcategoria = formularioActualizar.descripcionSubcategoria.value;
imagenPrincipalSubcategoria = formularioActualizar.imagenPrincipalSubcategoria.value;
imagen2 = formularioActualizar.imagen2.value;
imagen3 = formularioActualizar.imagen3.value;
imagen4 = formularioActualizar.imagen4.value;
imagen5 = formularioActualizar.imagen5.value;
imagen6 = formularioActualizar.imagen6.value;
e.preventDefault();
var url = "../Modelo/CRUD_Subcategorias_Modelo.php";
var datosDelFormulario = new FormData();
datosDelFormulario.append('operacion', 'actualizar');
datosDelFormulario.append('idSubategoria', idSubcategoria);
datosDelFormulario.append('idCategoria', nombreCategoria);
datosDelFormulario.append('nombreSubcategoria', nombreSubcategoria);
datosDelFormulario.append('descripcionSubcategoria', descripcionSubcategoria);
datosDelFormulario.append('imagenPrincipalSubcategoria',imagenPrincipalSubcategoria);
datosDelFormulario.append('imagen2',imagen2);
datosDelFormulario.append('imagen3',imagen3);
datosDelFormulario.append('imagen4',imagen4);
datosDelFormulario.append('imagen5',imagen5);
datosDelFormulario.append('imagen6',imagen6);
console.log(idCategoria);
console.log(idSubcategoria);
console.log(nombreSubcategoria);
console.log(descripcionSubcategoria);
console.log(imagenPrincipalSubcategoria);
console.log(imagen2);
console.log(imagen3);
console.log(imagen4);
console.log(imagen5);
console.log(imagen6);
fetch(url,{
method: 'POST',
body: datosDelFormulario
})
.then(res => res.json())
.then(lista_de_subcategorias => {
console.log(lista_de_subcategorias);
mostrar_subcategorias_en_tabla(lista_de_subcategorias);
contenedor_modal.style.display = "none";
})
})
}
const eliminar = (id) => {
//alert(id);
var url = "../Modelo/CRUD_Subcategorias_Modelo.php";
var datosDelFormulario = new FormData();
datosDelFormulario.append('operacion', 'eliminar');
datosDelFormulario.append('idSubcategoria', id);
fetch(url, {
method: 'POST',
body: datosDelFormulario
})
.then(res => res.json())
.then(lista_de_subcategorias => {
console.log('Subcategoría eliminada. Registro actualizado:', lista_de_categorias);
mostrar_subcategorias_en_tabla(lista_de_subcategorias);
})
.catch(function (error) {
console.log("¡Error!", error);
})
}