Foros del Web » Programando para Internet » ASP Clásico »

combobox dependientes con ajax.

Estas en el tema de combobox dependientes con ajax. en el foro de ASP Clásico en Foros del Web. hola alguien sabe como hacer un combobox dependiente pero con ajax o con algo que no sea tan lento, tengo varios ejemplos de combobox dependientes ...

  #1 (permalink)  
Antiguo 01/02/2007, 20:10
Avatar de lexus  
Fecha de Ingreso: enero-2002
Ubicación: Cali - Colombia
Mensajes: 2.234
Antigüedad: 22 años, 4 meses
Puntos: 4
De acuerdo combobox dependientes con ajax.

hola

alguien sabe como hacer un combobox dependiente pero con ajax o con algo que no sea tan lento,
tengo varios ejemplos de combobox dependientes con asp y javascript pero para mi caso en particular no me sirven porqeu se demoran mucho en cargar, ya qeu lo qeu trato de hacer es en el primer combo listar todo los paises del mundo y en el segundo combo dependiente de acuerdo al pais seleccionado listar todas las ciudades de ese pais.
como veran es una lista bastante grande de ciudades y paises. asi qeu lo ke trato de hacer es que cuando seleccione un pais se cargue por detras con ajax o algo las ciudades.

alguien sabe como ahcerlo?
tal como este ejemplo pero en asp
http://www.formatoweb.com.ar/ajax/se...pendientes.php
__________________
Control de Visitantes, Control de Accesos, Minutas digitales, Manejo de Correspondencia
http://www.controldevisitantes.com

Última edición por lexus; 01/02/2007 a las 20:29
  #2 (permalink)  
Antiguo 02/02/2007, 09:15
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Hola,

Busco exactamente lo mismo...

Alguien nos da una mano al amigo Lexus y a mi?

Saludos,
Luis Vásquez
  #3 (permalink)  
Antiguo 02/02/2007, 09:57
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Pregunta Re: combobox dependientes con ajax.

Mi web está en http://190.33.48.15/registrar_empresa.asp

Alli pueden ver lo fastidioso que se hace la recarga de la página cada vez que va a buscar en la B/D...

En todo el sitio utilizo una función javascript que recarga la misma página con todos los valores de la forma cuando ocurre el "Onchange". Al recargarse con estos nuevos valores, el ASP hace las consultas que muestran los nuevos valores en el combo.

Código:
<script language="javascript">

function carga_datos()
{
var total=document.forms.registro.elements.length;
var cadena =""
for (i=0;i<total;i++) 
{
var valor  = document.forms.registro.elements[i].value;
var nombre =document.forms.registro.elements[i].name;
var cadena = cadena +nombre+"="+valor+"&";
}
var pagina = "registrar_empresa.asp?"+cadena;
location.href=pagina;
}
</script>
Es posible que en este caso no se note tanto el "parpadeo", pero tengo otras páginas cuyas listas dependientes son muchas y se hace verdaderamente insoportable...

Es por eso que necesito una solución con AJAX para buscar los valores sin recargar...

1000 gracias de antemano,
Luis

Última edición por luisvasquez; 03/01/2008 a las 15:53
  #4 (permalink)  
Antiguo 02/02/2007, 11:51
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 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
__________________
...___...
  #5 (permalink)  
Antiguo 02/02/2007, 13:18
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: combobox dependientes con ajax.

Y de paso lo acabo de implementar para un proyecto, pero en la versión original en PHP. Qué bonito AJAX. Nunca lo había usado.

Gracias :)

Edit: Ahora le puedo subir el precio al cliente... le voy a decir que su aplicación es web2.0 casi-compatible :P
__________________
...___...

Última edición por AlZuwaga; 02/02/2007 a las 13:24
  #6 (permalink)  
Antiguo 02/02/2007, 13:48
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Gracias Al,

ahora mismo pruebo y te aviso...

Saludos, Luis

PD: Si quieres usarnos para probar todo lo que haces antes de subirle el precio al cliente, estamos a tus ordenes ...
  #7 (permalink)  
Antiguo 03/02/2007, 09:49
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Hola a todos...

Gracias a Al Zuwaga por ese código que nos pasaste...

Estoy tratando de incluir múltiples listas (país-estado-ciudad), pero no he logrado hacerlo...

Originalmente las listas están así :

Código:
<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>

Sin embargo, si quiero incluir una tercera lista debo hacer algo como esto:

Código:
<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"><% generaestados() %></td>
  <td id="fila_3" width="50%" class="punteado">
  <select class="combo" disabled="disabled" id="select_1" name="ciudades">
     <option id="valor_defecto" value="0">Selecciona estado...</option>
   </select>
 </td>
  </tr>
</table>

El problema es que el procedimiento generarestados solo debe mostrarse cuando se ha elegido un país, porque la primera vez, el código debe ser igual que el primer bloque mostrado arriba.

Lo ideal sería hacer algo más flexible porque si tengo 4 listas complico las cosas de nuevo...

Se les ocurre algo para mejorar esta solución?

Saludos y muchas gracias,
Luis Vásquez
  #8 (permalink)  
Antiguo 05/02/2007, 10:22
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Hola Amigos,

Este código ASP es una mezcla de lo que tradujo Al Zuwaga y algo que encontré no se donde, y TEORICAMENTE funciona para multiples combos (3 en este caso)

select_dependientes_3_niveles.asp

Código:
<%
sub generaselect()
     'ABRO LA B/D
      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")
	 sql = "select * from paises_registro order by nombre_pais asc" 
	      set rs = cnn.execute(sql)
	
       
	' Voy imprimiendo el primer select compuesto por los paises
	Response.Write "<select class=""combo"" id=""select_1"" name=""paises"" onChange=""cargaContenido(2)"">"
	Response.Write("<option value='0'>Elige  </option>")
	While not Rs.EOF
		Response.Write "<option value=""" & rs("codigo_pais") & """>" & rs("nombre_pais") & "</option>"
		Rs.MoveNext
	Wend
	Response.Write "</select>"
	
End sub
%>



<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(selectACargar)
{
	// Recibo el número correspondiente al combo que se debe llenar de datos
	var selectAnterior=selectACargar-1; // Obtengo el número del combo que activó el evento onChange
	// Extraigo el valor del combo que se ha cambiado
	var valor=document.getElementById("select_"+selectAnterior).options[document.getElementById("select_"+selectAnterior).selectedIndex].value;
	var elemento;
	
	if(valor!=0)
	{
		ajax=nuevoAjax();
		// Envio al servidor el valor seleccionado y el combo al cual se le deben poner los datos
		ajax.open("GET", "select_dependientes_3_niveles_proceso.asp?seleccionado="+valor+"&select_a_cargar="+selectACargar, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==1)
			{
				// Mientras carga elimino la opcion "Elige" y pongo una que dice "Cargando"
				elemento=document.getElementById("select_"+selectACargar);
				elemento.length=0;
				var opcionCargando=document.createElement("option"); opcionCargando.value=0; opcionCargando.innerHTML="Cargando...";
				elemento.appendChild(opcionCargando); elemento.disabled=true;	
			}
			if (ajax.readyState==4)
			{
				// Coloco en la fila contenedora los datos que recivo del servidor
				document.getElementById("fila_"+selectACargar).innerHTML=ajax.responseText;
			} 
		}
		ajax.send(null);
	}
	
	/* Colocamos mediante los whiles los selects en "Selecciona opción..." cuando el select anterior
	ha quedado en estado "Elige" */
	var x=1, y=null;
	while(x<=2)
	{
		valor=document.getElementById("select_"+x).options[document.getElementById("select_"+x).selectedIndex].value;
		if(valor==0)
		{
			while(x<=2) 
			{
				y=x+1;
				elemento=document.getElementById("select_"+y);
				elemento.length=0;
				var opcionSelecciona=document.createElement("option"); opcionSelecciona.value=0; opcionSelecciona.innerHTML="Selecciona opci&oacute;n...";
				elemento.appendChild(opcionSelecciona); elemento.disabled=true;
				x++;
			}
		}
		x++;
	}
	
}
</script>

<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>
</head>

<body>
<center>
<table border="1" width="600px" style="border-style:none;">
  <tr>
    <td id="fila_1" width="200px" class="punteado"><% generaSelect() %></td>

	<td id="fila_2" width="200px" class="punteado">
		<select class="combo" disabled="disabled" id="select_2" name="select_2">
		<option id="valor_defecto" value="0">Selecciona opci&oacute;n...</option>
		</select>
	</td>

	<td id="fila_3" width="200px" class="punteado">
		<select class="combo" disabled="disabled" id="select_3" name="select_3">
		<option id="valor_defecto" value="0">Selecciona opci&oacute;n...</option>
		</select>
	</td>
  </tr>
</table>
</center>
</body>
</html>


select_dependientes_3_niveles_proceso.asp
Código:
<!--#include file="includes/base_datos.asp"-->
<%

cod_a_buscar    = Request.QueryString("seleccionado")
select_a_cargar = request.QueryString("select_a_cargar")


call abrir_bd()

select case select_a_cargar
case 2 ' busco el estado
   sql = "select * from estado_registro where codigo_pais ="&cod_a_buscar&" order by nombre_estado asc" 
   set rs = cnn.execute(sql)
 
   response.Write "<select class='combo' id='select_"&select_a_Cargar&"' name='select_"&select_a_Cargar&"' onChange='cargaContenido(3)'>"		
   response.Write "<option value='0'>Elige</option>"
   While Not Rs.EOF
	 ' Imprimo las opciones del select
	   response.Write "<option value=""" & Rs("codigo_estado") & """>" & Server.HtmlEncode(Rs("nombre_estado")) & "</option>"
	   Rs.MoveNext
   Wend
   response.Write "</select>"

case 3 'busco las poblaciones del estado
   sql = "select * from poblaciones where codigo_estado ="&cod_a_buscar&" order by nombre_poblacion asc" 
   set rs = cnn.execute(sql)
 
   response.Write "<select class='combo' id='select_"&select_a_Cargar&"' name='select_"&select_a_Cargar&"'>"
   response.Write "<option value='0'>Elige</option>"
   While Not Rs.EOF
	' Imprimo las opciones del select
	 response.Write "<option value=""" & Rs("codigo_poblacion") & """>" & Server.HtmlEncode(Rs("nombre_poblacion")) & "</option>"
	 Rs.MoveNext
   Wend
  response.Write "</select>"
end select	
	
%>

Los combos dependientes funcionan perfectos aca, el problema es que cuando trato de insertar en la base de datos los valores select_2 y select_3 a través del request.form, vienen vacíos...se supone que alli deberian estar el estado y la población...

Alguna idea?

Saludos y gracias,
Luis
  #9 (permalink)  
Antiguo 05/02/2007, 10:47
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: combobox dependientes con ajax.

intentá recorrer la colección request.form() para ver qué es lo que trae. no recuerdo exactamente, pero me parece que era así:

Código:
for each elemento in request.form()
response.write elemento ": " & request.form(elemento) & "<br />"
next
__________________
...___...
  #10 (permalink)  
Antiguo 05/02/2007, 12:03
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Ya lo probé...

vienen vacíos el estado y la población, es decir select_2 y select_3

Si te fijas en algo curioso en el código HTML generado por el ASP...

cuando la página se carga la primera vez, el html viene con el select con todos los paises, pero en el estado y la población viene vacío. Eso está bien.

El asunto es que cuando cambias el país, aunque aparecen los estados en la lista, cuando miras el HTML generado continúa igual, es decir, no muestra la lista de estados. Es eso normal? No debería ser el código fuente HTML un reflejo fiel de lo que estás viendo en el navegador?

Pueden darle un vistazo en mi web. Por favor tomen en cuenta que el único país que tiene cargados los estado es Venezuela.

Saludos y muchas gracias,
Luis
  #11 (permalink)  
Antiguo 05/02/2007, 12:27
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: combobox dependientes con ajax.

¡Hey brother! No tenés ningún form! ;)

Por otro lado:

Cita:
Si te fijas en algo curioso en el código HTML generado por el ASP...

cuando la página se carga la primera vez, el html viene con el select con todos los paises, pero en el estado y la población viene vacío. Eso está bien.

El asunto es que cuando cambias el país, aunque aparecen los estados en la lista, cuando miras el HTML generado continúa igual, es decir, no muestra la lista de estados. Es eso normal? No debería ser el código fuente HTML un reflejo fiel de lo que estás viendo en el navegador?
Es perfectamente normal. No olvides que estamos hablando de ajax. El html originario nunca se actualizó realmente, así que al ver el código fuente siempre verás el mismo html. La generación de los otros select's se "debe producir" en memoria.

Meté todo dentro de un form y volvé a probarlo
__________________
...___...
  #12 (permalink)  
Antiguo 05/02/2007, 12:49
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Disculpa Amigo,

Te di el link con los archivos originales...aca va el que está dentro de un form

Es exactamente lo mismo que los originales, salvo que están todos los otros elementos de la forma y la actualización de la base de datos..

Si llenas todos los campos requeridos, te darás cuenta de que te da un error porque no existe el estado ni la ciudad..

Saludos,
Luis
  #13 (permalink)  
Antiguo 05/02/2007, 14:26
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: combobox dependientes con ajax.

a pues... estuve revisando hace un rato y todo parece ser normal...
tanto:
http://www.suruta.com/registrar_empr...ect_a_cargar=2

como:
http://www.suruta.com/registrar_empr...ect_a_cargar=3

te está devolviendo los datos correctos... el primero se llama select_2 y el segundo select_3... meté un botón en tu página inicial tal que así a ver qué ocurre:

Código:
<input type="button" onclick="alert(document.registro.select_2.value); alert(document.registro.select_3.value);" />
Si te los levanta javascript, te los debería levantar un request.form también
__________________
...___...
  #14 (permalink)  
Antiguo 05/02/2007, 20:53
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Cita:
Iniciado por Al Zuwaga Ver Mensaje
a pues... estuve revisando hace un rato y todo parece ser normal...
Hey Don Diego...una pregunta...(o varias)

Usaste Firefox o IE para probar?

Cuando dices "todo parece normal" significa que pudiste registrarte sin problemas?

Yo estuve haciendo pruebas con Firefox y fallaba...acabo de hacer una prueba con el siempre despreciado IE y funcionó...pude registrarme, pues no me dió el error de que faltaba el estado y la ciudad...

El problema ahora es resolver esa incompatibilidad de Ajax con Firefox...

Ahora tengo mucho sueño, pero mañana lo primero que haré despues de tomar medio litro de café, será probar de nuevo...me parece extraño que no funcione con FireFox...podrías probar tu y contarme?

Saludos y gracias,
Luis
  #15 (permalink)  
Antiguo 06/02/2007, 07:11
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Pregunta Re: combobox dependientes con ajax.

Confirmado...despues de 1/2 litro de café, la forma funciona con IE y no con Firefox...

Ahora, otra pregunta para el amigo Al Zuwaga...Cuando dijiste "lo acabo de implementar en un proyecto"...realizaste pruebas con Firefox?

Que será lo que está mal ahora?

Saludos, Luis
  #16 (permalink)  
Antiguo 06/02/2007, 11:19
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: combobox dependientes con ajax.

Cita:
Usaste Firefox o IE para probar?
Cuando dices "todo parece normal" significa que pudiste registrarte sin problemas?
Hola Luis, ayer probé tu código sólo con Firefox (y nunca llegué a registrarme porque me daba paja... muchas validaciones que no tuve ganas de respetar )

Cita:
Ahora, otra pregunta para el amigo Al Zuwaga...Cuando dijiste "lo acabo de implementar en un proyecto"...realizaste pruebas con Firefox?
Tanto con Firefox como con IE. Y en ambos funcionó bien. Claro, el tuyo es "más jugado". Tiene un select más y, supongo, debés haber modificado bastante el JS (yo lo único que modifiqué fueron minucias... el nombre de los select's en el JS... en vez de select_0 y select_1 les puse id_prov e id_municip)... ¿no será que al modificar el JS usaste algún código que sólo lo interprete IE?
Si los tiros van por ese lado, no sabría como ayudarte porque soy bastante torpe para el javascript.
__________________
...___...
  #17 (permalink)  
Antiguo 06/02/2007, 17:48
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Cita:
Iniciado por Al Zuwaga Ver Mensaje
¿no será que al modificar el JS usaste algún código que sólo lo interprete IE?
Umm... Yo encontré un ejemplo PHP que usaba 3 listas y lo traduje a ASP basandome también en tu traducción...de hecho, el ejemplo lo saqué de la misma web donde tu encotraste el de 2 niveles...

No hice ningún cambio importante...el asunto es que estos ejemplos no tienen el FORM, por lo tanto, aunque son muy ilustrativos en cuanto a las listas dependientes sin recargar la página, no sabemos si realmente las variables de la forma toman el valor en forma Request.Form("xxx") cuando usamos Firefox. Creo que la prueba definitiva será ponerle un form y ver los valores en el original PHP...

Cita:
Iniciado por Al Zuwaga Ver Mensaje
Si los tiros van por ese lado, no sabría como ayudarte porque soy bastante torpe para el javascript.
Con respecto a esto, mi torpeza en JS es superior a la de cualquiera...me siento como si estuviese desactivando una bomba..


Saludos, Luis Vásquez
  #18 (permalink)  
Antiguo 06/02/2007, 18:12
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Opps...perdón...no tengo PHP en mi server...no puedo hacer la prueba...
  #19 (permalink)  
Antiguo 06/02/2007, 18:30
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: combobox dependientes con ajax.

mañana pruebo los originales de las 3 listas en php y te cuento (si nadie lo hace antes que yo ;)
__________________
...___...
  #20 (permalink)  
Antiguo 06/02/2007, 22:13
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Nada...1000 pruebas y nada

Un comentario a ver si alguien ha tenido una experiencia similar y me da una mano...

Los valores del estado y la ciudad (select_2 y select_3) no se guardan en el formulario (en firefox) y creo saber porque, pero no he podido solventarlo...

El formulario está en una página ASP llamada registrar_empresa.asp, pero las listas de estados y ciudades se llenan en otra página llamada registrar_empresa_selects.asp, que es llamada desde Ajax.

Al parecer el problema es que las etiquetas de cierre y apertura del formulario (<form action=""></form>) se encuentran en una página y los selects de estado y ciudad en la otra, por esta razón parece que el formulario no considera estas etiquetas como parte de él y por tanto estos valores se pierden...

A ver que se me ocurre....
  #21 (permalink)  
Antiguo 07/02/2007, 07:52
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Cita:
Iniciado por Al Zuwaga Ver Mensaje
mañana pruebo los originales de las 3 listas en php y te cuento (si nadie lo hace antes que yo ;)
Gracias Al Zuwaga!

Estoy CASI seguro de que el problema es el que describí : Las listas de los campos Select_1 y Select_2 están fuera del Form, porque son generados por una página ASP externa.

Creo que hay una manera de solventar esto, pero implica cambiar mucho la estructura de la programación : Incluir el código de la página externa en la misma página e invocar esa sección solo cuando se hace la llamada desde Ajax...es decir, Ajax llamaría a la misma página "registrar_empresa.asp", pero con un parametro QueryString que le indique que debe ejecutar la parte del código que genera las listas de estado y ciudad.

TEORICAMENTE, al estar TODO el código en la misma página ASP debería conservar los valores de Select_2 y select_3...

Otra cosa que se me ocurre, pero no se si se puede hacer, es tener otro form XXXX en la página externa que encierre a los campos select_2 y 3 y luego traerse los valores con request.form...

Existe la manera de que pueda hacer esto? Algo como request.form.XXXX("select_2"), donde especifico de cual form me quiero traer el dato...?

Saludos y gracias,
Luis Vásquez

PD: Al Zuwaga...perdoname que insista en esto, pero estás seguro de que el select de 2 niveles funcionó en Firefox cuando le pusiste un Form y trataste de recuperar el valor de los campos??
  #22 (permalink)  
Antiguo 07/02/2007, 12:11
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: combobox dependientes con ajax.

Cita:
PD: Al Zuwaga...perdoname que insista en esto, pero estás seguro de que el select de 2 niveles funcionó en Firefox cuando le pusiste un Form y trataste de recuperar el valor de los campos??
Claro que estoy seguro, mirá sinó: www.poderlocal.net/ajax/2dependientes/ (no olvides darle al botón "buscar" )
Eso es del ejemplo original (en php) de 2 selects dependientes (con la mísera modificación que le hice al JS)


Cita:
El formulario está en una página ASP llamada registrar_empresa.asp, pero las listas de estados y ciudades se llenan en otra página llamada registrar_empresa_selects.asp, que es llamada desde Ajax...
...Estoy CASI seguro de que el problema es el que describí : Las listas de los campos Select_1 y Select_2 están fuera del Form, porque son generados por una página ASP externa.
Es que así es como funciona http://www.poderlocal.net/ajax/2depe...leccionado=bue
EDIT: Si antes intentaste entrar y te envió a otra página, es que olvidé quitar una validación en ese archivo : (pero ya está funcional para quienes no tengan una pequeña variable session inicializada)


Cita:
Creo que hay una manera de solventar esto, pero implica cambiar mucho la estructura de la programación : Incluir el código de la página externa en la misma página e invocar esa sección solo cuando se hace la llamada desde Ajax...es decir, Ajax llamaría a la misma página "registrar_empresa.asp", pero con un parametro QueryString que le indique que debe ejecutar la parte del código que genera las listas de estado y ciudad.
No tendría sentido entonces usar AJAX


Cita:
Otra cosa que se me ocurre, pero no se si se puede hacer, es tener otro form XXXX en la página externa que encierre a los campos select_2 y 3 y luego traerse los valores con request.form...

Existe la manera de que pueda hacer esto? Algo como request.form.XXXX("select_2"), donde especifico de cual form me quiero traer el dato...?
No no no, eso no se puede. No existe algo así como request.form.XXXX("select_2")

En un rato pruebo el de 3 selects dependientes.
__________________
...___...

Última edición por AlZuwaga; 07/02/2007 a las 12:48
  #23 (permalink)  
Antiguo 07/02/2007, 12:41
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: combobox dependientes con ajax.

Bueno, el de 3 dependientes también funcionó sin problemas:



No lo pongo online porque no tengo acceso a la base de datos ahora (tengo los puerto bloqueados en esta conexión), pero creeme que funcionó en local ;)
__________________
...___...
  #24 (permalink)  
Antiguo 07/02/2007, 12:42
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Gracias...esa prueba ayudaría mucho...asi veo si el problema está en el original o tiene que ver con la traducción a ASP...
  #25 (permalink)  
Antiguo 07/02/2007, 13:10
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Bueno, tendré que revisar esa "traducción"...en algo debi meter la pata...

informaré de los resultados...

1000 gracias por tu apoyo...
Luis
  #26 (permalink)  
Antiguo 07/02/2007, 19:22
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
De acuerdo Re: combobox dependientes con ajax.

Amigos,

Necesito más que un par de ojos para ver lo que está mal...he revisado línea por línea comparando los scripts PHP con los ASP traducidos y no veo ABSOLUTAMENTE ninguna razón por la que el formulario no toma los valores de los selects de estado y ciudad cuando uso Firefox..

Aca va el código ASP producto de la traducción a ver si alguien ve algo que no estoy viendo...mucho sabré agradecerles la ayuda que puedan prestarme...

select_dependientes_3_niveles.asp

Este script presenta el formulario para elegir de las listas los valores...al presionar el botòn, nos muestra los valores de los 3 Selects. El problema es que solo los muestra con IE y no lo hace con Mozilla Firefox...sinceramente no he probado con ningún otro navegador...

OJO : Solo Venezuela tiene estados y ciudades...

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<% 
  public cnn
  
  ' Funcion para abrir la Base de datos
function abrir_bd()
  dim rs 
  on error resume next
  set cnn = Server.CreateObject("adodb.connection")
  ' Conexion con Access
  xDb_Conn_Str = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("test.mdb") & ";"
  cnn.open xDb_Conn_Str

end function

' Funcion para cerrar la B/D
function cerrar_bd()
 on error resume next
 rs.close
 cnn.close
end function


' Genera el primer select con los paises
sub generaselect()
    call abrir_bd()
	sql = "select * from pais order by desc_pais_larga asc" 
	set rs = cnn.execute(sql)
       
	' Voy imprimiendo el primer select compuesto por los paises
	Response.Write "<select class=""combo"" id=""select_1"" name=""paises"" onChange=""cargaContenido(2)"">"
	Response.Write("<option value='0'>Elige  </option>")
	While not Rs.EOF
		Response.Write "<option value=""" & rs("cod_pais") & """>" & rs("desc_pais_larga") & "</option>"
		Rs.MoveNext
	Wend
	Response.Write "</select>"
	call cerrar_bd()
End sub
%>

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


<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(selectACargar)
{
	// Recibo el número correspondiente al combo que se debe llenar de datos
	var selectAnterior=selectACargar-1; // Obtengo el número del combo que activó el evento onChange
	// Extraigo el valor del combo que se ha cambiado
	var valor=document.getElementById("select_"+selectAnterior).options[document.getElementById("select_"+selectAnterior).selectedIndex].value;
	var elemento;
	
	if(valor!=0)
	{
		ajax=nuevoAjax();
		// Envio al servidor el valor seleccionado y el combo al cual se le deben poner los datos
		ajax.open("GET", "select_dependientes_3_niveles_proceso.asp?seleccionado="+valor+"&select_a_cargar="+selectACargar, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==1)
			{
				// Mientras carga elimino la opcion "Elige" y pongo una que dice "Cargando"
				elemento=document.getElementById("select_"+selectACargar);
				elemento.length=0;
				var opcionCargando=document.createElement("option"); opcionCargando.value=0; opcionCargando.innerHTML="Cargando...";
				elemento.appendChild(opcionCargando); elemento.disabled=true;	
			}
			if (ajax.readyState==4)
			{
				// Coloco en la fila contenedora los datos que recivo del servidor
				document.getElementById("fila_"+selectACargar).innerHTML=ajax.responseText;
			} 
		}
		ajax.send(null);
	}
	
	/* Colocamos mediante los whiles los selects en "Selecciona opción..." cuando el select anterior
	ha quedado en estado "Elige" */
	var x=1, y=null;
	while(x<=2)
	{
		valor=document.getElementById("select_"+x).options[document.getElementById("select_"+x).selectedIndex].value;
		if(valor==0)
		{
			while(x<=2) 
			{
				y=x+1;
				elemento=document.getElementById("select_"+y);
				elemento.length=0;
				var opcionSelecciona=document.createElement("option"); opcionSelecciona.value=0; opcionSelecciona.innerHTML="Selecciona opci&oacute;n...";
				elemento.appendChild(opcionSelecciona); elemento.disabled=true;
				x++;
			}
		}
		x++;
	}
	
}
</script>

<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>
</head>

<body>
<center>
 <% if request.Form = "" then ' Si es primera vez que entra a la pàgina, entonces muestra las listas para elegir los valores.%>
 
<table border="1" width="600px" style="border-style:none;">
<form action="" method="post" name="registro">
  <tr>
    <td id="fila_1" width="200px" class="punteado"><% generaSelect() %></td>

	<td id="fila_2" width="200px" class="punteado">
	
		<select class="combo" disabled="disabled" id="select_2" name="select_2">
		<option  value="0">Selecciona opci&oacute;n...</option>
		</select>
	</td>

	<td id="fila_3" width="200px" class="punteado">
		<select class="combo" disabled="disabled" id="select_3" name="select_3">
		<option  value="0">Selecciona opci&oacute;n...</option>
		</select>
	</td>
  </tr>
  <input name="Botón" type="submit">
  </form>
</table>

 <% else ' La segunda vez que entra a la forma, solo muestra los datos
 
   response.Write("Select 1:"&request.form("paises")&"<BR>Select 2:"&request.form("select_2")&"<BR>Select 3:"&request.form("select_3"))
 
  end if %>
</center>
</body>
</html>
Y aca vá el script que genera los selects dependientes y que es invocado usando Ajax.

select_dependientes_3_niveles_proceso.asp

Código:
<%  

 public cnn
  
  ' Funcion para abrir la Base de datos
function abrir_bd()
  dim rs 
  on error resume next
  set cnn = Server.CreateObject("adodb.connection")
  ' Conexion con Access
  xDb_Conn_Str = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("test.mdb") & ";"
  cnn.open xDb_Conn_Str

end function

' Funcion para cerrar la B/D
function cerrar_bd()
 on error resume next
 rs.close
 cnn.close
end function


cod_a_buscar    = Request.QueryString("seleccionado")
select_a_cargar = request.QueryString("select_a_cargar")

call abrir_bd()
	' Comienzo a imprimir el select
	if select_a_cargar=2 then
response.Write "<select class='combo' onChange='cargaContenido(3)' id='select_2' name='select_2'>"
		sql = "select * from estado where cod_pais ="&cod_a_buscar&" order by desc_estado asc" 
	else
		response.Write("<select class='combo' id='select_3' name='select_3'>")
		sql = "select * from poblaciones where cod_estado ="&cod_a_buscar&" order by desc_poblacion_larga asc" 
    End if		
	
	response.Write("<option value='0'>Elige</option>")
	set rs = cnn.execute(sql)
    if err.number <> 0 then
      response.redirect "mensaje_soporte.asp?error="&Server.Urlencode(dictLanguage.Item(session("idioma")&"_mensaje_soporte_02")&Err.number)	  
    End if
    While Not Rs.EOF
	   if select_a_cargar = 2 then
	      codigo =  Rs("cod_estado")
		  desc   =  Server.HtmlEncode(Rs("desc_estado"))
	   Else
	      codigo =  Rs("cod_poblacion")
		  desc   =  Server.HtmlEncode(Rs("desc_poblacion_larga"))
	   End if	      
	 ' Imprimo las opciones del select
	   response.Write "<option value=""" & codigo & """>" & desc & "</option>"
	   Rs.MoveNext
   Wend
   response.Write "</select>"


call cerrar_bd()
%>

Aca va el vinculo en mi PC donde se ejecutan dichos Scrpts

Si desean modificar y probar el código en sus propias maquinas, aca está la base de datos Access

Por favor, echenle un ojo a esto a ver si es que hay algo que Firefox pudiese no gustarle..

Saludos y muchas gracias por su ayuda,
Luis Vásquez

Última edición por luisvasquez; 07/02/2007 a las 19:23 Razón: Error ortográfico
  #27 (permalink)  
Antiguo 08/02/2007, 16:31
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Algún alma piadosa con los conocimientos tecnicos para ayudarme?
  #28 (permalink)  
Antiguo 19/02/2007, 01:41
Nax
 
Fecha de Ingreso: enero-2002
Ubicación: Euskal Herria
Mensajes: 129
Antigüedad: 22 años, 3 meses
Puntos: 0
Re: combobox dependientes con ajax.

Hola!

Me gustaría saber si conseguiste solucinarlo, a mi me pasa lo mismo que a ti... en IE funciona pero en Firefox no! Y lo estoy haciendo con dos select no con tres...

Saludos!
__________________
SOS Palestina
  #29 (permalink)  
Antiguo 19/02/2007, 05:27
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 879
Antigüedad: 20 años, 5 meses
Puntos: 6
Re: combobox dependientes con ajax.

Hola Nax,

Lamento informarte que no he podido solucionarlo...realmente no entiendo que es lo que sucede, pero no funciona...los que han probado el código en PHP dicen que no tiene problemas ni en el combo de 2 no el de 3, por lo que parece un problema de la traducción a ASP, pero he revisado lìnea por línea y no encuentro nada.

Saludos,
Luis
  #30 (permalink)  
Antiguo 19/02/2007, 06:23
Nax
 
Fecha de Ingreso: enero-2002
Ubicación: Euskal Herria
Mensajes: 129
Antigüedad: 22 años, 3 meses
Puntos: 0
Re: combobox dependientes con ajax.

Tengo puesto un alert que muestra el valor recogido en el select_1 y en el select_2, y me ocurre que cuando lo ejecuto en Firefox me muestra una vez el alert (sin valor claro!) pero cuando lo ejecuto en IE aparece dos veces seguidas!!! Puede dar alguna pista?
__________________
SOS Palestina
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 5 personas




La zona horaria es GMT -6. Ahora son las 06:27.