Uso del foreach

[Alexis88]

En uno de los mensajes anteriores dijiste que lo intentaste con Ajax y obtuviste el mismo resultado que sin utilizar esa técnica. Bueno, debes haber hecho algo mal porque es lo mejor para casos como este y así evitar incomodar al usuario con la recarga de toda la ventana. Voy a utilizar un ejemplo para que veas qué tan sencillo puede ser.

Supongamos que tenemos una base de datos con tres tablas:

TABLA: Categorías
CAMPOS:

• id_categoria
• nombre_categoria

TABLA: Alimentos
CAMPOS:

• id_alimento
• id_categoria
• nombre_alimento

TABLA: Detalles
CAMPOS:

• id_detalle
• id_alimento
• tipo_sabor
• lugar_procedencia
• precio

El ejemplo se presta para crear más tablas, pero para este ejemplo, solo usaremos tres. Ahora bien, el orden de consulta es el siguiente:

1. Consulta a la tabla 'Categorías'
2. Consulta a la tabla 'Alimentos' con el ID de la categoría seleccionada
3. Consulta a la tabla 'Detalles' con el ID de la categoría seleccionada

Sabiendo esto, en nuestro documento tendremos la siguiente estructura (la variable $conexion nos permitirá realizar la conexión con nuestra base de datos):

Código PHP:

<section id = "salida_categorias">
<?php
$query_categorias = mysqli_query('SELECT * FROM categorias');
if (mysqli_num_rows($query_categorias)){
?>
    <select id = "categorias" onchange = "ajax('id_categoria', this.value, 'salida_alimentos', 'alimentos.php', this.id)">
        <option value = "0">Seleccione una categoría</option>
<?php
    while ($row_categorias = mysqli_fetch_array($query_categorias)){
?>
        <option value = "<?=$row_categorias['id_categoria']?>"><?=$row_categorias['nombre_categoria']?></option>
<?php
    }
    mysqli_free_result($query_categorias);
?>
    </select>
<?php    
}
?>
</section>
 
<section id = "salida_alimentos"></section>
<section id = "salida_detalles"></section>
 

Para hacer las consultas a las tablas restantes, usaremos dos archivos distintos:

alimentos.php

Código PHP:

<?php
$id_categoria = mysqli_real_escape_string($conexion, strip_tags($_GET['id_categoria']));
 
$query_alimentos = mysqli_query($conexion, 'SELECT * FROM alimentos WHERE id_categoria = ' . $id_categoria);
if (mysqli_num_rows($query_alimentos)){
?>
    <select id = "alimentos" onchange = "ajax('id_alimento', this.value, 'salida_detalles', 'detalles.php')">
        <option value = "0">Seleccione un alimento</option>
<?php
    while ($row_alimentos = mysqli_fetch_array($query_alimentos)){
?>
        <option value = "<?=$row_alimentos['id_alimento']?>"><?=$row_alimentos['nombre_alimento']?></option>
<?php
    }
    mysqli_free_result($query_alimentos);
?>
    </select>
<?php
}
?>
 

detalles.php

Código PHP:

<?php
$id_alimento = mysqli_real_escape_string($conexion, strip_tags($_GET['id_alimento']));
 
$query_detalles = mysqli_query($conexion, 'SELECT * FROM detalles WHERE id_alimento = ' . $id_alimento);
if (mysqli_num_rows($query_detalles)){
?>
    <table>
        <thead>
            <th>Tipo de sabor<th>
            <th>Lugar de procedencia</th>
            <th>Precio (US$)</th>
        </thead>
 
        <tbody>
<?php
        while ($row_detalles = mysqli_fetch_array($query_detalles)){
?>
            <tr>
                <td><?=$row_detalles['tipo_sabor']?></td>
                <td><?=$row_detalles['lugar_procedencia']?></td>
                <td><?=$row_detalles['precio']?></td>
            </tr>
<?php
        }
        mysqli_free_result($query_detalles);
?>
        </tbody>
    </table>
<?php
}
?>
 

Y, por último, el archivo con el código JavaScript para realizar la petición Ajax:

Código Javascript:

function ajax(variable, valor, id_salida, url, id_actual){
    var xhr = window.XMLHttpRequest ? 
              new XMLHttpRequest() : 
              new ActiveXObject("Microsoft.XMLHTTP") || 
              new ActiveXObject("Msxml2.XMLHTTP"),
        queryString = valor !== 0 ? variable + "=" + valor : null;
 
    if (id_actual && id_actual == "categorias"){
        document.getElementById("salida_alimentos").innerHTML = null;
        document.getElementById("salida_detalles").innerHTML = null;
    }
 
    if (valor !== 0){
        xhr.open("GET", url + "?" + queryString, true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4){
                switch (xhr.status){
                    case 200:
                        document.getElementById(id_salida).innerHTML = xhr.responseText;
                        break;
                    case 404:
                        document.getElementById(id_salida).innerHTML = "Error 404 Not Found";
                        break;
                    default:
                        document.getElementById(id_salida).innerHTML = "Error: " + xhr.status;
                        break;
                }
            }
        };
        xhr.send(null);
    }
}
 

Y bien, lo que hago en este ejemplo es simple. Primero, en el archivo principal, realizo una búsqueda en la tabla 'Categorías' y de haber datos, los listo en un select. Más abajo, hay dos secciones para los alimentos y detalles, respectivamente. Al cambiar el valor del combo con las categorías, envío a mi función Ajax los siguientes parámetros:

• variable: El nombre de la variable en la query string.
• valor: El valor seleccionado en el combo.
• id_salida: El ID de la sección en la que veremos la respuesta a nuestra petición.
• url: El nombre del archivo al cual realizaremos la petición.
• id_actual: Este parámetro es opcional y solo me será útil al elegir una opción en el primer combo.

Una vez que seleccionamos un valor del primer combo (el de los alimentos), enviamos el valor seleccionado al archivo alimentos.php en el cual realizamos la búsqueda de los alimentos que correspondan con la categoría seleccionada, para lo cual, enviamos a través de Ajax el ID de la categoría que categoriza (valga la redundancia) a los alimentos. De encontrarse datos, se imprimirá un combo con la lista de alimentos encontrados. El proceso es muy similar al elegir un alimento de la lista, con la diferencia de que dicho cambio generará que el archivo detalles.php imprima una tabla con los detalles correspondientes.

Cabe señalar que el parámetro id_actual que envío a la función Ajax solo me es útil con el primer combo, pues al cambiar de categoría, limpio las secciones con los alimentos y detalles ya que no habría correspondencia entre dichos datos y la nueva categoría seleccionada. Además, solo si el valor seleccionado es diferente a '0' (la opción seleccionada por defecto), se realizará la petición.

Saludos