Articulos - asp - Combos dinámicos

MYGNET: http://www.mygnet.net/index.php [Imprimir | Cerrar vista de impresión]

Inicio | Artículos | Asp | Combos dinamicos

Combos dinámicos

Publicado el Viernes 16 de marzo de 2007 a las 11:56:32 por tiermx

Lecturas

COMBOS DINÁMICOS

Anteriormetne he visto artículos que tocan este tema, pero hasta ahora todos se refieren a PHP, pero ninguno referente a ASP, éste es el motivo del presente artículo, asi que sin mas empecemos.

Supongamos que tenemos una base de datos llamada AJAX, que contiene dos tablas relacionadas; una de giros comerciales(Giros_Comerciales) y otra de empresas(Empresas) - relacionada con la anterior por un mismo id de giro comercial -. Ahora, supongamos que queremos mostrar un formulario con todos los giros comerciales y que cada vez que seleccionemos un giro distinto se actualice ,dinámicamente, una lista de empresas; pero además esto lo queremos hacer sin estar recargando toda la página, o sea, ocupando AJAX.

Como primer punto debemos crear una página asp donde colocaremos el formulario, incluyendo la lista de giros y de empresas, la cual la llamaremos inicial.asp. La lista de giros la llenaremos desde un prinicpio y la lista de empresas será la que actualizaremos dinámicamente, el código es el siguiente:

(inicial.asp)

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
  'Línea para indicar el driver a ocupar
  'para la conexión a la base de datos
  basededatos="Driver={SQL Server};"& _
  "Server=LOCALHOST;"& _
  "Database=AJAX;"& _
  "Uid=sa;"& _
  "Pwd=;"
 
  'Objeto para realizar la conexión a la base de datos
  set conexion = server.createobject("adodb.Connection")
  conexion.open(basededatos)
 
  'Se declara la selección de campos de la base de datos
  giro = "SELECT Id, Descripcion FROM Giros_Comerciales ORDER BY Descripcion"
  set giros = conexion.execute(giro)
 %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Combos dinámicos con AJAX</title>
</head>
 
<body>
<!--Se crea el formulario para mostrar los combos-->
<form name="frmCombos" action="combos.asp" method="post">
<label>Giro comercial</label>
<select name="giros_comerciales" id="giros_comerciales">
<option value=""></option>
<%
  'Se muestran todos los giros comerciales obtenidos con la consulta
  do while not giros.eof
  %>
 <option value="<%=giros("id")%>"><%=giros("descripcion")%></option>
<%
    'Se avanza al siguiente registro
    giros.movenext
  loop
  'Se libera memoria
  set giros = nothing
  %>
 </select>
<p>
 <div id="Empresas_Relacionadas">
 <label>Empresas</label>
 <select name="empresas" id="empresas">
 </select>
 </div>
</p>
</form>
</body>
</html>
<%
  'Se cierra la conexión y se libera memoria
  conexion.close()
  set conexion = nothing
  %>

Lo que hemos hecho es crear la primera lista a partir de los datos de la tabla "giros_comerciales" y dejamos la lista correspondiente a las empresas vacía y dentro de una capa llamada Empresas_Relacionadas, esta capa será donde se muestre el contenido que obtendremos tras hacer la petición con AJAX.

Lo siguiente que tenemos que hacer es crear una instancia del objeto XMLHttpRequest() y una función que nos permita cargar el contenido para la lista de empresas; esta lista estará limitada por alguno de los giros comerciales. Agregando el código necesario, nuestra página se verá de la siguiente forma:

(inicial.asp)

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
  'Línea para indicar el driver a ocupar
  'para la conexión a la base de datos
  basededatos="Driver={SQL Server};"& _
  "Server=LOCALHOST;"& _
  "Database=AJAX;"& _
  "Uid=sa;"& _
  "Pwd=;"
 
  'Objeto para realizar la conexión a la base de datos
  set conexion = server.createobject("adodb.Connection")
  conexion.open(basededatos)
 
  'Se declara la selección de campos de la base de datos
  giro = "SELECT Id, Descripcion FROM Giros_Comerciales ORDER BY Descripcion"
  set giros = conexion.execute(giro)
 %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Combos dinámicos con AJAX</title>
<script>

//Función para crear un objeto XMLHttpRequest
function crearAjax() {
  var Ajax
 
  if (window.XMLHttpRequest) { // Intento de crear el objeto para Mozilla, Safari,...
    Ajax = new XMLHttpRequest();
    if (Ajax.overrideMimeType) {
      //Se establece el tipo de contenido para el objeto
      //http_request.overrideMimeType('text/xml');
      http_request.overrideMimeType('text/html');
     }
   } else if (window.ActiveXObject) { // IE
    try { //Primero se prueba con la mas reciente versión para IE
      Ajax = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
       try { //Si el explorer no esta actualizado se prueba con la versión anterior
         Ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
   }
 
  if (!Ajax) {
    alert('¡Por favor, actualice su navegador!');
    return false;
   }
  else
  {
    return Ajax;
    }
 
 }
 
  //Función para actualizar el combo para las empresas
  function ActualizarEmpresas (pagina, cmbDelimitador, divContenedora)
  {
    //Se obtiene la referencia del div
    //donde se mostrarán los resultados
    var contenedor = document.getElementById(divContenedora);
 
    //Se obtiene el valor seleccionado en el combo delimitador
    var valdelimitador = document.getElementById(cmbDelimitador)
 
    var x = valdelimitador.value
 
    //Se contruye la url pasando, como parámetro, el valor seleccionado
    var url_final = pagina+'?Id='+x
 
    //Se muestra una imagen de espera en la capa contenedora del combo delimitado
    contenedor.innerHTML = '<img src="imagenes/cargando.gif" />'
 
    //Se crea un objeto XMLHttpRequest
    var objAjax = crearAjax()
 
    objAjax.open("GET", url_final)
    objAjax.onreadystatechange = function() {
      if (objAjax.readyState == 4) {
       //Se escribe el resultado en la capa contenedora
       contenedor.innerHTML = objAjax.responseText;
      }
    }
    objAjax.send(null);
  }

</script>
</head>
 
<body>
<!--Se crea el formulario para mostrar los combos-->
<form name="frmCombos" action="combos.asp" method="post">
<label>Giro comercial</label>
<select name="giros_comerciales" id="giros_comerciales">
<option value=""></option>
<%
  'Se muestran todos los giros comerciales obtenidos con la consulta
  do while not giros.eof
  %>
 <option value="<%=giros("id")%>"><%=giros("descripcion")%></option>
<%
    'Se avanza al siguiente registro
    giros.movenext
  loop
  'Se libera memoria
  set giros = nothing
  %>
 </select>
<p>
 <div id="Empresas_Relacionadas">
 <label>Empresas</label>
 <select name="empresas" id="empresas">
 </select>
 </div>
</p>
</form>
</body>
</html>
<%
  'Se cierra la conexión y se libera memoria
  conexion.close()
  set conexion = nothing
  %>

La función, en javascript, "ActualizarEmpresas" que hemos creado en este punto, necesita de tres parámetros:

pagina. Es la URL de la página que obtendrá los datos de las empresas basándose en el filtro de giro comercial

cmbDelimitador Es el valor de la propiedad "id" de la lista que contiene los giros comerciales

divContenedora Es el valor de la propiedad "id" de la capa donde se mostrará la lista filtrada de empresas.

Ahora tenemos que agregar la llamada a la función en el evento change de la lista de giros comerciales, para que cada vez que se eliga un giro distinto, la lista de empresas se actualice. Entonces nuestra página inicial.asp quedará de la siguiente forma:

(inicial.asp)

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
  'Línea para indicar el driver a ocupar
  'para la conexión a la base de datos
  basededatos="Driver={SQL Server};"& _
  "Server=LOCALHOST;"& _
  "Database=AJAX;"& _
  "Uid=sa;"& _
  "Pwd=;"
 
  'Objeto para realizar la conexión a la base de datos
  set conexion = server.createobject("adodb.Connection")
  conexion.open(basededatos)
 
  'Se declara la selección de campos de la base de datos
  giro = "SELECT Id, Descripcion FROM Giros_Comerciales ORDER BY Descripcion"
  set giros = conexion.execute(giro)
 %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Combos dinámicos con AJAX</title>
<script>

//Función para crear un objeto XMLHttpRequest
function crearAjax() {
  var Ajax
 
  if (window.XMLHttpRequest) { // Intento de crear el objeto para Mozilla, Safari,...
    Ajax = new XMLHttpRequest();
    if (Ajax.overrideMimeType) {
      //Se establece el tipo de contenido para el objeto
      //http_request.overrideMimeType('text/xml');
      http_request.overrideMimeType('text/html');
     }
   } else if (window.ActiveXObject) { // IE
    try { //Primero se prueba con la mas reciente versión para IE
      Ajax = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
       try { //Si el explorer no esta actualizado se prueba con la versión anterior
         Ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
   }
 
  if (!Ajax) {
    alert('¡Por favor, actualice su navegador!');
    return false;
   }
  else
  {
    return Ajax;
    }
 
 }
 
  //Función para actualizar el combo para las empresas
  function ActualizarEmpresas (pagina, cmbDelimitador, divContenedora)
  {
    //Se obtiene la referencia del div
    //donde se mostrarán los resultados
    var contenedor = document.getElementById(divContenedora);
 
    //Se obtiene el valor seleccionado en el combo delimitador
    var valdelimitador = document.getElementById(cmbDelimitador)
 
    var x = valdelimitador.value
 
    //Se contruye la url pasando, como parámetro, el valor seleccionado
    var url_final = pagina+'?Id='+x
 
    //Se muestra una imagen de espera en la capa contenedora del combo delimitado
    contenedor.innerHTML = '<img src="imagenes/cargando.gif" />'
 
    //Se crea un objeto XMLHttpRequest
    var objAjax = crearAjax()
 
    objAjax.open("GET", url_final)
    objAjax.onreadystatechange = function() {
      if (objAjax.readyState == 4) {
       //Se escribe el resultado en la capa contenedora
       contenedor.innerHTML = objAjax.responseText;
      }
    }
    objAjax.send(null);
  }

</script>
</head>
 
<body>
<!--Se crea el formulario para mostrar los combos-->
<form name="frmCombos" action="combos.asp" method="post">
<label>Giro comercial</label>
<select name="giros_comerciales" id="giros_comerciales" onchange="ActualizarEmpresas('obten_empresas.asp', 'giros_comerciales', 'Empresas_Relacionadas')">
<option value=""></option>
<%
  'Se muestran todos los giros comerciales obtenidos con la consulta
  do while not giros.eof
  %>
 <option value="<%=giros("id")%>"><%=giros("descripcion")%></option>
<%
    'Se avanza al siguiente registro
    giros.movenext
  loop
  'Se libera memoria
  set giros = nothing
  %>
 </select>
<p>
 <div id="Empresas_Relacionadas">
 <label>Empresas</label>
 <select name="empresas" id="empresas">
 </select>
 </div>
</p>
</form>
</body>
</html>
<%
  'Se cierra la conexión y se libera memoria
  conexion.close()
  set conexion = nothing
  %>

Por último, sólo tenemos que crear la página "obten_empresas.asp", la cuál es la encargada de obtener las empresas que correspondan al giro comercial seleccionado, para esta página utilizaremos el método HTMLEncode() del objeto server, esto para que caracteres acentuados o símbolos especiales se vean correctamente. Puedes hacer la prueba, primero utilizando el método HTMLEncode() y luego quitarlo para que puedas ver mejor la diferencia. El código es el siguiente:

(obten_empresas.asp)

<%
  giro_comercial_id = request.QueryString("id")
 
  'Línea para indicar el driver a ocupar
  'para la conexión a la base de datos
  basededatos="Driver={SQL Server};"& _
  "Server=LOCALHOST;"& _
  "Database=AJAX;"& _
  "Uid=sa;"& _
  "Pwd=;"
 
  'Objeto para realizar la conexión a la base de datos
  set conexion = server.createobject("adodb.Connection")
  conexion.open(basededatos)
 
  'Se declara la selección de campos de la base de datos
  empresa = "SELECT Id, Nombre "& _
  "FROM Empresas "& _
  "WHERE Giro_Comercial_Id = "&giro_comercial_id&" "& _
  "ORDER BY Nombre"
  set empresas = conexion.execute(empresa)
 %>
 <label>Empresas</label>
 <select name="empresas" id="empresas">
 <%
   'Se muestran todas las empresas obtenidas con la consulta
   do while not empresas.eof
 %>
 <option value="<%=empresas("id")%>"><%=Server.HTMLEncode(empresas("nombre"))%></option>
 <%
     'Se avanza al siguiente registro
     empresas.movenext
   loop
   set empresas = nothing
 %>
 </select>

Para hacer la prueba sin utilizar el método HTMLEncode sólo hay que modificar este pedazo de código:

<%=Server.HTMLEncode(empresas("nombre"))%>

y dejarlo de la siguiente forma:

<%=empresas("nombre")%>

Listo, ahora sólo resta probar nuestro código.

***El código fuente de este artículo, la imagen a la que hago referencia en el código y el script para generar la base de datos (La base de datos esta en SQLServer 2000) se pueden descargar desde:

Base de datos
Páginas e imágen

Páginas:

1 | 2

Agregar comentario

18.- hugorei

Sábado 28 de marzo de 2009 a las 01:34

como hago para agregar un combobox mas ? en vez de 2 combobox que sean tres y dependientes ???? saludos

Editar | Responder

17.- Victor

Jueves 26 de marzo de 2009 a las 12:01

¡MUY BUEN EJEMPLO! AMI ME FUNCIONO BIEN. SOLO TENGO UN PEQUEÑO PROBLEMITA QUE EN EL SEGUNDO COMBO NO ACEPTA LOS CARACTERES ESPECIALES, LAS PALABRAS QUE TIENEN ACENTO ME LAS ESCRIBE MAL, SI TIENES COMO ARREGLAR ESO LO AGRADECERIA MUCHO. GRACIAS

Editar | Responder

17.1.- adrian

Lunes 13 de abril de 2009 a las 12:41

Puedes utilizar Server.HtmlEncode(Empresas("DESC_EMPRESA"))

Editar | Responder

16.- Hugo

Sábado 21 de marzo de 2009 a las 12:40

De verdad que muy buen articulo, muy bien explicado, gracias, necesitaba algo asi y me ha servido de mucho en mi proyecto.

Editar | Responder

15.- Ald

Miércoles 10 de diciembre de 2008 a las 08:27

Excelente articulo, me ayudo a superar mis dudas acerca de Ajax con Asp.

Sin embargo, me podria ayudar con el problema siguiente: Estoy claro que con Server.HTMLEncode() se desplega la información correctamente en una página incluyendo aquella que contiene caracteres especiales, pero ¿Cómo hacer para mandar a guardar en la BD de SLQ Server 2000 datos con caracteres especiales?

Cuando mando a guardar datos con caracteres especiales a la Base de Datos, la parte donde va el caracter especial escribe un conjunto de caracteres raros. Me podrias ayudar por favor.

Editar | Responder

14.- Jose

Jueves 12 de junio de 2008 a las 01:49

Me parece uno de los artículos más claramente explicados y útiles que he visto sobre este tema.
Felicitaciones al autor y miles de gracias

Editar | Responder

13.- Pablo

Lunes 02 de junio de 2008 a las 13:29

Hola
puede ser que ande en firefox?

Editar | Responder

12.- joan blanch

Domingo 20 de abril de 2008 a las 11:37

para que al principio no se vea el combo vacio de empresas y cuando escojas un giro despues se muestre como tiene que hacer

gracias

www.esigual.com

Editar | Responder

11.- Laura

Martes 13 de noviembre de 2007 a las 08:47

Por favor, ¿me puede decir alguien como recoger el valor del combo que se rellena dinámicamente? Al procesar el formulario puedo recoger el valor del primer combo, pero del segundo, que se genera con ajax, desconozco la forma. Gracias

Editar | Responder

11.1.- Lord Tier White

Lunes 19 de noviembre de 2007 a las 22:05

Hola Laura,

El valor de la variable lo recoges normalmente como cualquier otra, por ejemplo, para este artículo el código del combo que se genera automáticamente es el siguiente (el código esta simplificado):

<select name="empresas" id="empresas">
 <%
   do while NOT empresas.eof
 %>
 <option value="<%=empresas("id")%>"><%=empresas("nombre")%></option>
 <%
     empresas.movenext
   loop
   SET empresas = nothing
 %>
 </select>

Entonces en la página que recibes los valores, esta variable la recibirías de la siguiente forma.

1. Si indicaste el método POST en la definición del formulario:

<%
  varEmpresas = Request.Form("empresas")
  %>

2. Si indicaste el método GET en la definición del formulario:

<%
  varEmpresas = Request.QueryString("empresas")
  %>

Espero haberte ayudado, cualquier cosa puedes preguntarme directamente o desde aqui mismo, adios.

Editar | Responder

11.1.1.- Patricia

Martes 27 de mayo de 2008 a las 08:12

HOLA
Como podria utilizar este codigo, para tres combos????
Que apartir del primero se desprenda el segundo y del segundo el tercero???
AYUDA!!!!!

Gracias

Editar | Responder

11.1.1.1.- Patricia

Martes 27 de mayo de 2008 a las 08:51

Hola ya encontre la forma, en la pagina obten_empresas.asp, en el segundo combo le ponemos la funcion ActualizarEmpresas pero ahora con los datos del tercer combo, ademas agregue a la URL final del script un valor que me identificara a que combo me refiero, para cuando cambie de pagina pregunte cual combo deseo llenar.

Muchas gracias por el codigo me funciono muy bien... byee.....

Editar | Responder

11.1.2.- Esteban

Viernes 23 de enero de 2009 a las 10:57

Porqué en el archivo "obten_empresas.asp" al recoger el dato utiliza
giro_comercial_id = request.QueryString("id") ?

En la página "inicial.asp", en la declaración del formulario se indico el método POST :
<form name="frmCombos" action="combos.asp" method="post">

porque para recogerlo en "obten_empresas.asp" entonces se utiliza el método request.QueryString ?...

Por favor alguien podrñia aclararme esta duda que no lo estoy entendiendo bien...

GRACIAS

Editar | Responder

Páginas:

1 | 2

Ingreso

Últimos registrados

  solano
  chimento86
  rotsen
  shumy
  iosoynono
  i_yana12@hotmail.com
  florchi
  jesus_02@hotmail.com
  fercal
  eltenaza

Estadísticas

Seleccionar Navegadores

¿Más sobre ti?

¿Cuantos años tienes?
¿Eres...?
Tu correo?

¿En que te desempeñas actualmente?

Saber más de ti nos ayudara a construir una comunidad más de acuerdo a tus necesidades.

Si no te quieren como tú quieres que te quieran, ¿qué importa que te quieran?.
( Amado Nervo)

MyGnet © Agosto 2005 - Marzo 2010, My Group Net - La comunidad de programación

usuario
contraseña