Ver Mensaje Individual
  #4 (permalink)  
Antiguo 02/02/2007, 11:51
Avatar de AlZuwaga
AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 9 meses
Puntos: 535
Re: combobox dependientes con ajax.

Hola Lexus, luisvasquez y al resto de la manada del foro :)

Acá les dejo una traducción a ASP de dicho código:

select_dependientes.asp:
Código:
<!-- 
Este código fuente es de libre utilización y modificación bajo la siguiente licencia:
http://creativecommons.org/licenses/by-nc-sa/2.5/
Puedes distribuir estos scripts o colocarlos en tu Sitio siempre y cuando no elimines estos comentarios y la licencia expuesta sea respetada.

Mas ejemplos y material sobre AJAX en: http://www.formatoweb.com.ar/ajax
Cualquier sugerencia, crítica o comentario son bienvenidos.
Contacto: [email protected]

Traducido a ASP por Al Zuwaga (http://www.forosdelweb.com/showpost.php?p=1878212&postcount=4) el 02/02/2007
-->
<%
sub generaPaises()
	cst = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/db/db_.mdb")
	Set oConn = Server.CreateObject("ADODB.Connection")
	oConn.open cst
	
	Set Rs = Server.CreateObject("ADODB.Recordset")
	consulta = "SELECT * FROM paises_registro"
	Rs.Open consulta, oConn

	' Voy imprimiendo el primer select compuesto por los paises
	Response.Write "<select class=""combo"" id=""select_0"" name=""paises"" onChange=""cargaContenido()"">"
	While not Rs.EOF
		Response.Write "<option value=""" & Rs(0) & """>" & Rs(1) & "</option>"
		Rs.MoveNext
	Wend
	Response.Write "</select>"

	Rs.Close
	Set Rs = Nothing
	oConn.Close
	Set oConn = Nothing
End sub
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css"> 
.punteado 
{ 
	border-style:dotted; 
	border-color:#000000; 
	background-color:#EAEAEA;
	font-family:Verdana; 
	font-size:10px; 
	text-align:center;
}

.combo
{
	font-family:Verdana; 
	font-size:10px; 
	border-color:#CCCCCC;
}
</style>

<script language="javascript" type="text/javascript">
function nuevoAjax()
{ 
	/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
	lo que se puede copiar tal como esta aqui */
	var xmlhttp=false; 
	try 
	{ 
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
	}
	catch(e)
	{ 
		try
		{ 
			// Creacion del objet AJAX para IE 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
		} 
		catch(E) { xmlhttp=false; }
	}
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); } 

	return xmlhttp; 
}

function cargaContenido()
{
	var valor=document.getElementById("select_0").options[document.getElementById("select_0").selectedIndex].value;
	if(valor==0)
	{
		// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo todo por defecto
		combo=document.getElementById("select_1");
		combo.length=0;
		var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Pais...";
		combo.appendChild(nuevaOpcion);	combo.disabled=true;
	}
	else
	{
		ajax=nuevoAjax();
		ajax.open("GET", "select_dependientes_proceso.asp?seleccionado="+valor, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==1)
			{
				// Mientras carga elimino la opcion "Elige pais" y pongo una que dice "Cargando"
				combo=document.getElementById("select_1");
				combo.length=0;
				var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
				combo.appendChild(nuevaOpcion); combo.disabled=true;	
			}
			if (ajax.readyState==4)
			{ 
				document.getElementById("fila_2").innerHTML=ajax.responseText;
			} 
		}
		ajax.send(null);
	}
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo</title>
</head>

<body>
<center>
<table border="1" width="400" style="border-style:none;">
  <tr>
    <td id="fila_1" width="50%" class="punteado"><% generaPaises() %></td>
	<td id="fila_2" width="50%" class="punteado">
		<select class="combo" disabled="disabled" id="select_1" name="estados">
		<option id="valor_defecto" value="0">Selecciona pais...</option>
		</select>
	</td>
  </tr>
</table>
</center>
</body>
</html>



select_dependientes_proceso.asp:
Código:
<%
Function validaValor(parametro)
	' Funcion utilizada para validar el numero de pais recibido por GET. En nuestra base
	' de datos tenemos como validos los paises desde 1 a 21
	If parametro >= 1 AND parametro <= 21 then
		validaValor = true
	Else
		validaValor = false
	End if
End Function

valor = Request.QueryString("seleccionado")

if(validaValor(valor)) Then
	' Si el numero corresponde a un codigo de pais valido paso a procesar
	cst = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/db/db_.mdb")
	Set oConn = Server.CreateObject("ADODB.Connection")
	oConn.open cst
	
	Set Rs = Server.CreateObject("ADODB.Recordset")
	' Genero la consulta trayendo todos los estados que correspondan al codigo de pais elegido
	consulta = "SELECT * FROM estados_registro WHERE codigo_pais=" & valor
	Rs.Open consulta, oConn

	' Comienzo a imprimir el select
	response.Write "<select class=""combo"" id=""select_1"" name=""estados"">"
	While Not Rs.EOF
		' Imprimo las opciones del select
		response.Write "<option value=""" & Rs(0) & """>" & Server.HtmlEncode(Rs(1)) & "</option>"
		Rs.MoveNext
	Wend
	response.Write "</select>"


	Rs.Close
	Set Rs = Nothing
	oConn.Close
	Set oConn = Nothing
End if
%>


ajax_ejemplo_2.sql (definición de las tablas de la base de datos):
Código:
-- 
-- Estructura de tabla para la tabla `estados_registro`
-- 

CREATE TABLE `estados_registro` (
  `codigo_estado` int(5) unsigned NOT NULL auto_increment,
  `nombre_estado` varchar(100) NOT NULL default '',
  `codigo_pais` int(3) unsigned NOT NULL default '0',
  PRIMARY KEY  (`codigo_estado`),
  KEY `codigo_pais` (`codigo_pais`)
) TYPE=MyISAM PACK_KEYS=0;

-- --------------------------------------------------------

-- 
-- Estructura de tabla para la tabla `paises_registro`
-- 

CREATE TABLE `paises_registro` (
  `codigo_pais` int(3) unsigned NOT NULL default '0',
  `nombre_pais` varchar(30) NOT NULL default '',
  PRIMARY KEY  (`codigo_pais`)
) TYPE=MyISAM;
Saludos
__________________
...___...