1

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!

2
  • Quieres decir que si metes la funcion load donde tienes comentado //$("#spansAli").html(resp) no te carga el select? Commented el 21 ene. 2019 a las 11:11
  • No, en ese caso, metiendo la función load donde está comentado //$("#spansAli").html(resp), sí carga el select correctamente
    – Juaqui
    Commented el 21 ene. 2019 a las 12:17

3 respuestas 3

2

Para visualizar los cambios debes poner el load dentro del response de la función.

    $.get("grAddEli.php", {accion, ali}, function(resp)
    {
        load();

    });

Esto es así ya que el código js se ejecuta linea a linea pero en el caso que comentas hay una llamada asíncrona así que el código se sigue ejecutando sin esperar la respuesta de tu función.

1

Según veo, a la función load() actualmente la llamas desde 3 sitios. Al inicio de un $(document).ready() y al final de dos funciones click().

Esta función es la que inyecta en tu DOM la respuesta que recibes del AJAX. Si tan solo la llamases desde $(document).ready() se ejecutaría solamente cuando el DOM de la página ha cargado por primera vez. Esto es correcto ya que es la manera de actuar de la función $(document).ready(), pero si quieres que el select se actualice en respuesta a "Añadir" o "Eliminar" un item has de llamar de nuevo a la función load() para que vuelva a construir un select actualizado y lo inyecte en el DOM.

EDIT

Las llamada que actualmente tienes dentro de eventos click() al archivo grAddEli.php tan solo borran o añaden registros en tu DB, no actualizan el DOM de tu página. La único función que realiza esta función es la que has llamado load(), por eso el código que tienes comentado en la respuesta de los AJAX que llamas desde las funciones click() no actualizan el select.

Referencia: Función $document.ready()

1

el load fuera si funciona solo que lo hace antes de que la base de datos logre actualizar los datos.

Ejecuta primero el get y luego el load pero el load se ejecuta antes de que la base de datos logre hacer la query

$.get("grAddEli.php", {accion, ali}, function(resp)
{
    //$("#spansAli").html(resp);

});
load();

Por eso es importante poner la funcion dentro del get porque asi le dices que justo cuando acabe de realizar la query en el servidor, ejecute inmediatamente tu codigo

$.get("grAddEli.php", {accion, ali}, function(resp)
{
    load();
});

Asi cuando llames a load(), la base de datos le habra dado tiempo en realizar los cambios y el load coja los datos actualizados.

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.