Studio Press

Just another Blogger Blog

ad

Crear Combos Dinámicos con Ajax

¿Como lleno dinámicamente un combo y lo hago dependiente de otro?

En algun momento de las aplicaciones uno necesita la funcionalidad de hacer combos dependientes de determinada información, cada combo se debe llenar dinamicamente con consultas a la base de datos.

Bien, empecemos con la parte del cliente, como ir generando los tags correspondientes asi como sus rutinas para llenarlos, al último haremos un ejemplo con las rutinas de llamado al server.

Lo primero: crear la forma para los tags en html:

<form id="Actividades">
<table id="TableContent" style="width: 758px; " border="1">
<tr><td style=" width:40%;"><select Class="dDList" id="MP" style="width:200px;" onactivate="GetMP(this);" onchange="ChangeMP();" > <option >Seleccione uno</option></select></td>
<td style=" width:40%;"><select Class="dDList" style="width:200px;" id="PKT" onchange="ChangePKT();"><option >Seleccione uno</option></select></td>
<td style=" width:20%;"></td></tr>
<tr><td style=" width:40%;"><select Class="dDList" id="PRJ" style="width:200px;" onchange="ChangePRJ();"><option value="hola">Seleccione uno</option></select></td>
<td style=" width:40%;"><select Class="dDList" style="width:200px;"id="ACT" onchange="ChangeACT();"><option value="hola">Seleccione uno</option></select></td>
<td style=" width:20%;"></td></tr>
<tr><td colspan="3" style=" height:400px; text-align:center; overflow-y:auto; vertical-align:top;">
<div id="Grid" style="width:95%; border-color:AliceBlue; overflow-y:auto;">h</div></td></tr>
<tr></tr>
</table>
</form>


Despues la rutina de llenado, solo explicaremos una, en el ejemplo hay 4.


function GetMP(combo)
{
//LIMPIANDO EL SELECTBOX
combo.options.length = 0;
document.forms['Actividades'].PKT.disabled=true
document.forms['Actividades'].PRJ.disabled=true
document.forms['Actividades'].ACT.disabled=true
for (i=1;i<4; i++) combo.add(getOption(i,"MASTERPLAN_"));
}

function getOption(indice,combo)
{
var opt = document.createElement('option');
opt.value =indice;
opt.text = combo+indice;
return opt;
}


Con estas dos funciones basicamente llenamos el combo, la segunda función va creando los elementos de opcion al vuelo, le mandas el indice y el tag donde se agregará la opción, en la primer función deshabilitas los combos dependientes y llenas en un ciclo el combo.


Que pasa cuando seleccionas una opción del primer combo seleccionado?, pues debes obtener el indice y valor de esa opción para enviarla como parámetro de la consulta siguiente , por tanto hay que habilitar el combo siguiente y hacer el proceso de llenado tal como se explicó en la seccion anterior, y asi sucesivamente, para los demás.


function ChangeMP()

{
document.forms['Actividades'].PKT.disabled=false;
//OBTENER EL INDICE
var indx= document.forms['Actividades'].MP.selectedIndex;
//OBTENER EL VALOR DEL ELEMENTO
var valor=document.forms['Actividades'].MP.options[indx].value;
var texto=document.forms['Actividades'].MP.options[indx].text;
//alert( valor+"\n"+texto);
//LLENA LOS PAQUETES
document.forms['Actividades'].PKT.options.length = 0;
for (i=1;i<6; i++) document.forms['Actividades'].PKT.add(getOption(i,"PAQUETE_"));
}

Hasta ahora lo llenamos manualmente, pero hay que hacer las consultas necesarias para que funcione, bien hay que declarar el namespace en en el codebehind cs de nuestra página, este ejemplo es para Punto net en c#, pero la idea funciona para otros lenguajes, aqui haermos uso del ayaxpro, pero puede hacerce de manera simple con un objeto xmlhttprequest (explicado en otro artículo).


function FILLMP(combo)

{
//LIMPIANDO EL SELECTBOX
combo.options.length = 0;
document.forms['Actividades'].PRJ.disabled=true;
document.forms['Actividades'].ACT.disabled=true;
//LLENANDO EL COMBO
Arr=AdmActividades.GetMP().value;
if(Arr!="Error De consulta")
{
var Index=GetIndx(Arr);
var Vals=GetVal(Arr);
var Txts=GetTxt(Arr);
FillOptions(combo,Index,Vals,Txts)
}
}

La redaccion es casi igual hasta la parte de llenado del combo donde enAdminActividades es el namesspace , seguido del metodo GetMp() para obtener un arreglo de la consulta en le server.



[AjaxPro.AjaxMethod()]
public string GetMP()
{
string arr = "";
DataSet ds = new DataSet();
MasterPlan = new clsMasterPlan();
try { ds = MasterPlan.ObtieneMP(); }
catch { arr = "Error De consulta"; }
if (ds != null) { arr = GetArreglo(ds,0,5); }
//REGRESA UN ARREGLO DE LOS ID DE LOS MASTERPLAN y TEXTOS
return arr;
}

En este ejemplo lo regresamos en un string pero podemos regresarlo en un dataset también, bien esa parte de la consulta cada quien sabe como la llenará , aqui solo explico el vínculo entre server-cliente.

Para hacer uso del ayaxpro, ver el artículo de como ambientar.

para el ejemplo del html aqui.
para el ejemplo en html y punto net aspx

De reconocer algun error, ya ambientado correctamente, enviar un nota, Gracias.
ad

Programando en Ajax con punto net

Consejos y ejemplos practicos como aplicar ajax

Mas info...

Ingresa tu correo:

Atraves de FeedBurner