Foros del Web - Ver Mensaje Individual

carloshhp · #1 (**permalink**) 23/12/2010, 10:17

Hola, estoy usando un codigo de [URL="http://www.formatoweb.com.ar/ajax/select_dependientes.php"]http://www.formatoweb.com.ar/ajax/select_dependientes.php[/URL] para hacer selects dependientes de 2 niveles, me ha funcionado bien con dos selects, ahora intento hacer que al seleccionar una opcion del primer select se actualicen las opciones de 2 selects simultaneamente, lo k intente hacer es duplicar la funcion que hace la actualizacion en el evento onChange del primer select y llamar a ambas aasi onChange="cargaContenido(this.id);cargaContenido2( this.id)" al interior de la segunda funcion cambie el nombre de la funcion nuevoAjax por neoAjax para evitar cualquier colision, no he logrado hacer k esto funcione y me da el siguiente error "selectDestino.parentNode is null or not an object" sospecho que el problema puede estar aqui:
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseTe xt;
}
que es una linea que es identica en ambas funciones, si llamo solo a una funcion (ya sea la primera o la segunda) el combobox correspondiente funciona de maravilla pero si trato que funcionen ambos a la vez me da siempre ese mismo error, esto es algo que no comprendo porque soy novato en ajax ojala un experto pueda ayudarme DE VERDAD ME URGE COMO NO TIENEN IDEA, aqui dejo mi messenger [email protected](si es necesario agregenme)si alguien tiene una idea de k estoy haciendo mal, muchas gracias

aqui dejo los codigos originales, para tener una mejor idea:

select_dependientes.php

Cita:

<?php
$con_string_quickmenu="host=localhost port=5432 dbname=allion user=postgres password=postgres";//string de conexion
if($conexion_quickmenu = pg_connect($con_string_quickmenu)){//si se puede abrir la conexion a BD
//echo ("conexion establecida con BD<br>");
}else{//si no se puede abrir la conexion
echo("no se puede conectar a la BD<br>");
}//fin del if-else conexion
$consulta=pg_query("SELECT id_operadora, nombre_operadora FROM operadora");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>comboboxes dependientes ajax</title>
<style>

#demoDer{
position:relative;
left:150px;
top:-20px;
}
</style>
<script type="text/javascript">
function newAjax()
{
/* 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)
{
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}

// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="operadora_select";
listadoSelects[1]="tipoGrafica";

function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}

function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects , idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrige n);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelect s[x]);
selectActual.length=0;

var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Seleccionar";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDest ino);
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=newAjax();
ajax.open("GET", "select_dependientes_proceso.php?select="+idSelect Destino+"&opcion="+opcionSeleccionada, true);
// ajax.open("GET", "select_dependientes_proceso2.php?select="+idSelec tDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseTe xt;
}
}
ajax.send(null);
}
}
</script>
</head>
<body>
<div id="demo" style="width:600px;">
<div id="demoIzq">
<select name='operadora_select' id='operadora_select' onChange='cargaContenido(this.id)'>
<?php
//echo "<option value='0'>Elegir operadora</option>";
while($result_operadoras=pg_fetch_row($consulta))
{
echo "<option value='".$result_operadoras[0]."'>".$result_operadoras[1]."</option>";
}
?>
</select>
</div>
<div id="demoDer">
<select disabled="disabled" name="tipoGrafica" id="tipoGrafica">
<option value="1">barras 2D</option>
</select>
</div>
</div>
</body>
</html>

select_dependientes_proceso.php

Cita:

<?php
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
$listadoSelects=array(
"operadora_select"=>"operadora",
"tipoGrafica"=>"tipoGrafica"
);

function validaSelect($selectDestino)
{
// Se valida que el select enviado via GET exista
global $listadoSelects;
if(isset($listadoSelects[$selectDestino])) return true;
else return false;
}

function validaOpcion($opcionSeleccionada)
{
// Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
if(is_numeric($opcionSeleccionada)) return true;
else return false;
}

$selectDestino=$_GET["select"];
$opcionSeleccionada=$_GET["opcion"];

if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
$tabla=$listadoSelects[$selectDestino];

$con_string_quickmenu="host=localhost port=5432 dbname=allion user=postgres password=postgres";//string de conexion
if($conexion_quickmenu = pg_connect($con_string_quickmenu)){//si se puede abrir la conexion a BD
//echo ("conexion establecida con BD<br>");
}else{//si no se puede abrir la conexion
echo("no se puede conectar a la BD<br>");
}//fin del if-else conexion

if($opcionSeleccionada!=5){//si la opcion seleccionada no es 'todos'
$consulta=pg_query("select id_tipo_grafica,nombre_tipo_grafica from tipo_grafica order by id_tipo_grafica") or die("error query tipo grafica");
}elseif($opcionSeleccionada==5){
$consulta=pg_query("select id_tipo_grafica,nombre_tipo_grafica from tipo_grafica where visibilidad=1 order by id_tipo_grafica") or die("error query tipo grafica");
}

// Comienzo a imprimir el select
echo "<select name='tipoGrafica' id='tipoGrafica' onChange='cargaContenido(this.id)'>";
// echo "<option value='0'>Elegir Grafica</option>";
while($registro=pg_fetch_row($consulta))
{
// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
$registro[1]=htmlentities($registro[1]);
// Imprimo las opciones del select
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";
//echo $opcionSeleccionada;
}
?>