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.