Tengo en una Base de datos una tabla que almacena alimentos.
En una web, muestro los alimentos en un elemento select. Tengo un campo de texto para añadir alimentos y el botón Añadir. Tengo también un botón Eliminar para el eliminar el alimento seleccionado. Para añadir, eliminar y mostrar los alimentos en el select, uso llamadas a archivos mediante ajax.
Este es el código de la página principal:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="jq3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
function load()
{
// Se carga el Elemento Select con los alimentos
var accion = "cargar";
$.get("grCargar.php", {accion}, function(resp)
{
$("#spansAli").html(resp);
});
}
$(document).ready(function()
{
load(); // Se carga el Elemento Select con los alimentos
// Botón Añadir. Se añade alimento a la BD y al elemento select
$("#bAdd").click(function(evento)
{
// Se llama al archivo grAddEli.php con las variables accion y ali para añadir el alimento a la BD
var accion = "añadir";
var ali = $("#nombre").val();
$.get("grAddEli.php", {accion, ali}, function(resp)
{
//$("#spansAli").html(resp);
});
load();
});
// Botón Eliminar. Se elimina alimento de la BD y del elemento select
$("#bEli").click(function(evento)
{
// Se llama al archivo grAddEli.php con las variables accion y ali para eliminar el alimento de la BD
var accion = "eliminar";
var ali = $("#sAli option:selected").val();
$.get("grAddEli.php", {accion, ali}, function(resp)
{
//$("#spansAli").html(resp);
});
load();
});
});
</script>
</head>
Nombre <input type="text" id="nombre"> <input type="button" id="bAdd" value="Añadir"><br><br>
<span id="spansAli"></span> <input type="button" id="bEli" value="Eliminar"><br>
</html>
Este es el código de la página grCargar.php
<?
include("config.php");
include("funciones.php");
$cnx = conectar();
if($_GET[accion]=="cargar")
{
// Se crea el elmento select
$tmp = "<select id=sAli><option value=0 selected>-- Selecciona alimento --</option>";
// Consulta sobre la tabla alimentos para añadir las opciones al select
$res = mysqli_query($cnx, "SELECT * FROM alimentos") or die(mysql_error());
while($fila = mysqli_fetch_array($res))
$tmp .= "<option value=" . $fila[id_ali] . ">" . $fila[descripcion] . "</option>";
$tmp .= "</select>";
echo $tmp;
}
?>
Este es el código de la página grAddEli.php
<?
include("config.php");
include("funciones.php");
$cnx = conectar();
if($_GET[accion]=="añadir")
{
mysqli_query($cnx, "INSERT INTO alimentos (descripcion, stock, categoria) VALUES ('" . $_GET[ali] . "', NULL, NULL)");
}
else if($_GET[accion]=="eliminar")
{
mysqli_query($cnx, "DELETE FROM alimentos WHERE id_ali = " . $_GET[ali]);
}
?>
La inserción y eliminación de la Base de datos se hace correctamente. Pero para ver los cambios en el elemento select tengo que actualizar la página principal. Si coloco el load() del evento click del botón Añadir dentro de la llamada al archivo grAddEli.php entonces sí me muestra los cambios en el select directamente sin recargar la página principal. Lo mismo ocurre si coloco el load del evento click del botón Eliminar dentro de la llamada al mismo archivo.
Pero por qué no funciona si el load() va fuera???
No es lo mismo? Estoy llamando primero al archivo que realiza los cambios en la BD y luego llamo a otro archivo para que actualice el select de la página... Pero si lo coloco fuera tengo que actualizar la página para ver los cambios...
Gracias!