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:
- Consulta a la tabla 'Categorías'
- Consulta a la tabla 'Alimentos' con el ID de la categoría seleccionada
- 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:
Ver original<section id = "salida_categorias">
<?php
$query_categorias = mysqli_query('SELECT * FROM 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
?>
<option value = "<?=$row_categorias['id_categoria']?>"><?=$row_categorias['nombre_categoria']?></option>
<?php
}
?>
</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:
Ver original<?php
$query_alimentos = mysqli_query($conexion, 'SELECT * FROM alimentos WHERE id_categoria = ' . $id_categoria); ?>
<select id = "alimentos" onchange = "ajax('id_alimento', this.value, 'salida_detalles', 'detalles.php')">
<option value = "0">Seleccione un alimento</option>
<?php
?>
<option value = "<?=$row_alimentos['id_alimento']?>"><?=$row_alimentos['nombre_alimento']?></option>
<?php
}
?>
</select>
<?php
}
?>
Código PHP:
Ver original<?php
$query_detalles = mysqli_query($conexion, 'SELECT * FROM detalles WHERE id_alimento = ' . $id_alimento); ?>
<table>
<thead>
<th>Tipo de sabor<th>
<th>Lugar de procedencia</th>
<th>Precio (US$)</th>
</thead>
<tbody>
<?php
?>
<tr>
<td><?=$row_detalles['tipo_sabor']?></td>
<td><?=$row_detalles['lugar_procedencia']?></td>
<td><?=$row_detalles['precio']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
?>
Y, por último, el archivo con el código JavaScript para realizar la petición Ajax:
Código Javascript
:
Ver originalfunction 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
