lista enlazada dinámica

En este tutorial veremos como lograr una lista enlazada dinámica, utilizando HTML, JavaScript, PHP y base de datos MySQL.

Pues, con HTML únicamente no se puede ya que HTML es un lenguaje estático.

Podrías usar PHP que es dinámico, pero bueno tampoco podrás hacerlo con PHP ya que se ejecuta en el servidor y tu requieres de una acción en el navegador para cargar la segunda lista.

Y bien, si hablamos de lenguajes para interactuar con el usuario eso es JavaScript, pero claro bueno no funciona tampoco ya que JavaScript no puede ir a tu base de datos.

Otra forma es usar AJAX o acrónimo de Asynchronous JavaScript And XML (JavaScript y XML asíncronos, donde XML es un acrónimo de eXtensible Markup Language)

http://es.wikipedia.org/wiki/AJAX

que no es un lenguaje es mas bien la nueva forma de llamarle a la mezcla de esos lenguajes como XML, JavaScript, HTML, etc. pero lo haremos sin el nombre raro.

Y ahora paso a explicar la solución a lo que preguntas :)

Como elementos HTML importantes vamos a tener 3 elementos importantes, estos son:

frmDatos que es el formulario que contiene las listas

selCiudades que es la lista donde seleccionas las ciudades

selPropiedades que es la lista donde seleccionas las propiedades

El formulario, es bien simple y se ve como el link que puse arriba. El código HTML del mismo seria así:

<form id="frmDatos" name="frmDatos" method="post" action=""><label>Ciudades:<select name="selCiudades" size="6" id="selCiudades"></select></label><label>Propiedades:<select name="selPropiedades" size="6" id="selPropiedades"></select></label></form>

Tu lo puedes escribir o generar con DreamWeaver, lo importante es el nombre de las 2 listas y el formulario (selCiudades, selPropiedades, frmDatos).

http://es.wikipedia.org/wiki/AJAX

Simple no ?? :P

Bien, el siguiente tema es que según dices debes cargar la información desde una base de datos, yo en mi ejemplo cargare las ciudades desde la base de datos y la tabla ciudades (explicada en el tutorial de bienes raíces).

La lista de Propiedades no se carga en este momento ya que es producto del resultado de seleccionar una Ciudad, por tanto lo primero y único que cargaremos ahora son las ciudades.

Para cargar las ciudades debemos agregar código PHP que permita leer esas ciudades desde la tabla ciudades de la base de datos :), o sea que al HTML lo modificamos para que quede así:

<label>Ciudades:<select name="selCiudades" size="6" id="selCiudades"><?php$tablaCiudades = mysql_query('SELECT * FROM ciudades ORDER BY nombre ASC');while ($registroCiudad = mysql_fetch_array($tablaCiudades)) {?><option value="<?php echo $registroCiudad['id']; ?>"><?php echo $registroCiudad['nombre']; ?></option><?php}mysql_free_result($tablaCiudades);?></select></label>

Explico ....

$tablaCiudades = mysql_query('SELECT * FROM ciudades ORDER BY nombre ASC');

en esa línea, se seleccionan todos los registros de la tabla ciudades ordenados por nombre, que usaremos para cargar la lista.

while ($registroCiudad = mysql_fetch_array($tablaCiudades)) {

en esta línea indicamos que se repetirá el fragmento de código que este entre { } (llaves) tantas veces como registros (o ciudades) existan.

<option value="<?php echo $registroCiudad['id']; ?>"><?php echo $registroCiudad['nombre']; ?></option>

y esa es la línea que se repite, o sea una opción (opción) de la lista por cada ciudad, donde se guardara en la lista el id (numero de ciudad) y el nombre de la ciudad :)

mysql_free_result($tablaCiudades);

finaliza y cierra la tabla para liberar la memoria.

Con este código logramos gran parte del trabajo, que es presentar el formulario, con todas las ciudades en la lista de ciudades.

Luego de cargada las ciudades, debemos continuar con esto, y el siguiente paso es que cuando un usuario ve una lista de ciudades, va a elegir una de ellas y se deberían mostrar las propiedades de esa ciudad :), bueno acá para interactuar con el usuario, necesitamos JavaScript, y lo vamos a usar para generar un Evento OnChange, este evento se ejecuta cada vez que alguien cambia la selección de la lista en este caso, cuando alguien selecciona por primera vez una ciudad o selecciona otra.

Esta linea es sencilla, ya que donde hoy tenemos así:

<select name="selCiudades" size="6" id="selCiudades">

le agregamos el evento onchange correspondiente para llamar a la función javascript de carga de propiedades, esta linea queda así:

<select name="selCiudades" size="6" id="selCiudades" onchange="ComponerLista(document.forms.frmDatos.selCiudades[selectedIndex].value);">

Esa linea llama a la función ComponerLista y le envía como parámetro el número de ciudad seleccionada (selectedIndex) en la lista ciudades (selCiudades) que esta en el formulario de datos (frmDatos) en la pagina actual (document).

Fácil no ?

Lista esta parte, ahora debemos escribir el código JavaScript de la función ComponerLista :)

Esta funcion es bastante simple, y su codigo es asi:

function ComponerLista(xPro) {document.forms.frmDatos.selCiudades.disabled = true;document.forms.frmDatos.selPropiedades.length = 0;CargarPropiedades(xPro);document.forms.frmDatos.selCiudades.disabled = false;}

Primero desactiva la lista de ciudades,

document.forms.frmDatos.selCiudades.disabled = true;

de forma que nadie pueda dar click mientras se carga, luego deja vacía la lista de propiedades (por si había algo seleccionado),

document.forms.frmDatos.selPropiedades.length = 0;

luego Carga las Propiedades que están en esa ciudad, por medio de otra función que veremos mas adelante,

CargarPropiedades(xPro);

a la cual le envía como parámetro el id de la ciudad.

Luego de cargadas las propiedades vuelve a permitir que demos click en a lista de ciudades (por si queremos cambiar) activándola de nuevo,

document.forms.frmDatos.selCiudades.disabled = false;

Bien, así es de simple esta función :)

La función de CargarPropiedades también usara JavaScript, para generar el HTML de la lista de Propiedades según esa ciudad, pero también usara PHP para leer de la base de datos la información, el código resultante es el siguiente:

function CargarPropiedades(xCiu) {var odocument.forms.frmDatos.selPropiedades.disabled=true;<?php$tablaPropiedades = mysql_query('SELECT * FROM propiedades ORDER BY idciudad ASC');while ($registroPropiedad = mysql_fetch_array($tablaPropiedades)) {?>if (xCiu == <?php echo $registroPropiedad["idciudad"]; ?>) {o = document.createElement("OPTION");o.text = '<?php echo $registroPropiedad["titulo"]; ?>';o.value = <?php echo $registroPropiedad["id"]; ?>;document.forms.frmDatos.selPropiedades.options.add (o);} <?php}mysql_free_result($tablaPropiedades);?> document.forms.frmDatos.selPropiedades.disabled=false;}

Primero creamos una variable para guardar el objeto OPTION que contenga cada Propiedad que se genera dinámicamente y se agregara a la lista Propiedades,

var o

luego desactivamos la lista de propiedades para que nadie pueda dar click hasta que no termine la carga automatica,

document.forms.frmDatos.selPropiedades.disabled=true;

el siguiente codigo es PHP (se indica con <?php ?>) y es igual al que usamos hace un rato para cargar las ciudades, solo que este selecciona las propiedades y repite tantas veces como propiedades existan,

<?php $tablaPropiedades = mysql_query('SELECT * FROM propiedades ORDER BY idciudad ASC'); while ($registroPropiedad = mysql_fetch_array($tablaPropiedades)) { ?>

lo que va a repetir, es un código JavaScript que comienza con un IF que controlara si esa propiedad es de una ciudad igual a la elegida (xCiu) en la lista de ciudades,

if (xCiu == ) {

si es una propiedad de la ciudad elegida, genera un objeto tipo OPTION (que son los que forman la lista), en la variable "o" que habíamos creado

o = document.createElement("OPTION");

luego a ese elemento de la lista le asigna en la propiedad TEXT el titulo (o nombre) de esa propiedad,

o.text = '';

la propiedad TEXT es el texto que vemos en cada elemento de la lista, luego le asigna a la propiedad VALUE (Valor) el id de esa propiedad o sea su numero de identificación,

o.value = ;

luego de que el elemento OPTION de esa propiedad esta listo, lo agrega en la lista de propiedades HTML mediante la siguiente linea de codigo JavaScript,

document.forms.frmDatos.selPropiedades.options.add (o);

por ultimo se cierran la llaves del while } y la del if }, y liberamos de la memoria la tabla Propiedades,

mysql_free_result($tablaPropiedades);

y volvemos a activar la lista para que puedan elegir elementos de ella :)

<form id="frmDatos" name="frmDatos" method="post" action=""><label>Ciudades:<select name="selCiudades" size="6" id="selCiudades" onchange="ComponerLista(document.forms.frmDatos.selCiudades[selectedIndex].value);"><?php$tablaCiudades = mysql_query('SELECT * FROM ciudades ORDER BY nombre ASC');while ($registroCiudad = mysql_fetch_array($tablaCiudades)) {?><option value="<?php echo $registroCiudad['id']; ?>"><?php echo $registroCiudad['nombre']; ?></option><?php}mysql_free_result($tablaCiudades);?></select></label><label>Propiedades:<select name="selPropiedades" size="6" id="selPropiedades"></select></label></form></body></html><?phpmysql_close($conexion);?>

lista enlazada dinámica

Documents