Crear lista desde bd dependiente de otra

jorodriguea · #1 (**permalink**) 06/04/2011, 09:09

Amigos me he estado rompiendo la cabeza tratando de hacer esto. Les comento, resulta que tengo una lista las cuales tienen elementos <a>. Lo que quiero realizar es que al hacer click sobre uno de estos enlaces, se cree o se cargue un nuevo li, dependiente de este con datos obtenidos desde una base de datos.
Lo que he realizado es crear una evento onclick en cada uno de estos <a>, y obtener el id del que se presiono. De ahi no se que hacer.
Si alguien me puede ayudar.

laratik · #2 (**permalink**) 06/04/2011, 10:48

¿consulta a base de datos? eso me suena a lenguaje del lado del servidor, una forma fácil para hacer lo que deseas seria:

Código PHP:

 
<html>

<head>

<style>

    .principal ul {

        display: none;

    }

</style>

<script>

function mostrar(id) {

    if(document.getElementById(id).style.display == "block") {

        document.getElementById(id).style.display = "none";

    } else {

        document.getElementById(id).style.display = "block";

    }

}

</script>

</head>

<body>

<ul>

<li class="principal"><a href="javascript:mostrar('datos1')">Mostar sucursales empresa1</a>

    <ul id="datos1">

        <?php

        $res = mysql_query("SELECT sucursal FROM empresa1");

        while($dato = mysql_fetch_array($res)) {

            ?>

            <li><?php echo $dato; ?></li>

            <?php

        }

        ?>

    </ul>

</li>

<li class="principal"><a href="javascript:mostrar('datos2')">Mostar sucursales  empresa2</a>

    <ul id="datos1">

        <?php

        $res = mysql_query("SELECT sucursal FROM empresa2");

        while($dato = mysql_fetch_array($res)) {

            ?>

            <li><?php echo $dato; ?></li>

            <?php

        }

        ?>

    </ul></li>

<li class="principal"><a href="javascript:mostrar('datos3')">Mostar sucursales  empresa3</a>

    <ul id="datos3">

        <ul id="datos1">

        <?php

        $res = mysql_query("SELECT sucursal FROM empresa3");

        while($dato = mysql_fetch_array($res)) {

            ?>

            <li><?php echo $dato; ?></li>

            <?php

        }

        ?>

    </ul>

    </ul></li>

<ul>

</body>

</html>

Si quieres es cargar directamente cuando pulsas el enlace, deberás tener conocimientos de AJAX.

jorodriguea · #3 (**permalink**) 06/04/2011, 16:21

Gracias por tu respuesta. Eso lo que me enviaste lo puedo hacer.
Mi duda es exactamente a lo q mencionaste acerca de Ajax. Si me puedes ayudar te lo agradeceria.

IsaBelM · #4 (**permalink**) 06/04/2011, 16:38

esto te puede encaminar

laratik · #5 (**permalink**) 06/04/2011, 22:04

y la pregunta del millón, si sabes hacerlo así ¿por que no hacerlo de esa manera? IsaBelM muy buen post, de hecho me parece que http://www.librosweb.es/ajax/index.html es un muy buen manual de AJAX, de todas maneras, como me gusta echar código

aquí coloco la solución usando AJAX:

Código HTML:

<html> 
<head> 

<script>
function getXMLHttpRequest() {
	var xmlHttp;
	try {
		xmlHttp = new XMLHttpRequest();
	} catch(e1) {
		try {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e2) {
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e3) {
				xmlHttp = null;
			}
		}
	}
	return xmlHttp;
}

function requestAJAX(id) {
	if(document.getElementById("su_"+id).innerHTML != "") {
		document.getElementById("su_"+id).innerHTML = "";
		return;
	}
	var xmlHttp = getXMLHttpRequest();
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4) {
			var r = xmlHttp.responseText;
			document.getElementById("su_"+id).innerHTML = r;
		}
	};
	xmlHttp.open("POST", "prueba.php", true);
	xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xmlHttp.send("emp="+id);
} 
</script> 
</head> 
<body> 
<ul> 
<li><a href="javascript:requestAJAX('empresa1')">Mostar sucursales empresa1</a> 
    <ul id="su_empresa1"></ul> 
</li> 
<li><a href="javascript:requestAJAX('empresa2')">Mostar sucursales  empresa2</a> 
    <ul id="su_empresa2"></ul></li> 
<li><a href="javascript:requestAJAX('empresa3')" id="empresa3">Mostar sucursales  empresa3</a> 
    <ul id="su_empresa3"></ul> 
    </ul></li> 
<ul> 
</body> 
</html>

Aunque hacerlo de esta manera me parece poco practico. SALUDOS.