Ajax con PHP

floripondio · #1 (**permalink**) 26/01/2011, 03:08

Hola a tod@s,

Estoy intentando anidar dos combos con ajax y php con un ejemplo de un curso que estoy realizando. Llega a completar los dos combos, pero al seleccionar opciones del primero no filtra el segundo, es decir, me lista la tabla completa.

la estructura de la base de datos es

Departamento (1er combo)
------------------

1;Informatica
2;Financiero

Seccion (2º combo)
--------------------
1;Programacion
1;Sistemas
2;Pagos
2;Cobros
2;Nominas

Gracias de antemano por vuestra ayuda.

<script languaje="javascript">

//Cargamos la funcion carga_departamentos() en la etiqueta body
//de la siguiente manera <body onLoad="carga_departamentos()">

function carga_departamentos()
{

//uso de la función ajax Ajax.Request (sirve para hacer una petición ajax)

var param='';
var url='departamentos.php';
var ajaxRequest = new Ajax.Request(
url,
{
method: 'get',
parameters: param,
asynchronous: true,
onComplete: showDpto
});

}

function showDpto(HttpRequest, responseHeader)
{
try{

respuesta=HttpRequest.responseText;
elementos=respuesta.split("<BR>");
if (elementos[0]=='error')
{
error(elementos[1]);
}
else
{
elementos.each( function(elem){
if (elem!='')
{
datos=elem.split(";");
var opt=document.createElement('option');
opt.value=datos[0];
opt.text=datos[1];
document.form1.id_departamento.add(opt);
}

});
carga_secciones();
}
}
catch(e){
alert (e.description);
}
}
function error(descripcion)
{
alert("Se ha producido un error php:\n"+descripcion);
}

function carga_secciones()
{

//Los parámetros los tomo de seccion.php

var param='id_seccion='+$F('id_departamento');
var url='seccion.php';
var ajaxRequest = new Ajax.Request(
url,
{
method: 'get',
parameters: param,
asynchronous: true,
onComplete: showSeccion
});
}

function showSeccion(HttpRequest, responseHeader)
{
document.form1.id_seccion.length=0;

respuesta=HttpRequest.responseText;
elementos=respuesta.split("<BR>");

elementos.each( function(elem){
if (elem!='')
{
datos=elem.split(";");

var opt=document.createElement('option');
opt.value=datos[0];
opt.text=datos[1];
document.form1.id_seccion.add(opt);
}
});
}
</script>

aniMAYtions · #2 (**permalink**) 26/01/2011, 05:46

Por qué no lo haces con javascript directamente?
a ver, te paso un código

Código PHP:

Ver original//esta función se crea con la librería xajax
 
.
.
.
<select name='nombreselect' id='nombreselect'  value='' onchange='rellenaelotroCombo(this.value)'>
//ahora van los options de este select primero
</select>
/el segundo select lo creas tal que así
<select name='nombreselect2' id='nombreselect2' value=''></select>
//los options se crearán con javascript cuando se cambie el valor del select inicial

Código Javascript:

Ver originalfunction rellenaelotroCombo(valor)
{
    document.formulario.nombreselect2.length=0;
    /*document.formulario.nombreselect2.options[0] = new Option("","","defaultSelected","");*/
    var indice=1;
    <?
        $conexion = conectar();
        $sql_valor= "SELECT * from tabla";
        $rs_valor = mysql_query($sql_valor, $conexion);
        if(mysql_num_rows($rs_valor)>0)
        {
            while($row_valor = mysql_fetch_assoc($rs_valor))
            {
    
    ?>
    if(valor=='<?=$row_valor["id"]?>')
    {
    document.formulario.nombreselect2.options[indice] = new Option("<?=utf8_encode($row_valor["nombre"])?>","<?=$row_valor["id"]?>");
    indice++;
    }
    <?
            }
        }
    ?> 
};

Espero haberte ayudado.
Un saludo!!

floripondio · #3 (**permalink**) 26/01/2011, 06:29

Hola Animaytions,

Gracias por tu ayuda. Parece mucho más simple tu propuesta. Pero esto es parte del código de un curso Ajax con PHP que estoy realizando, e intento comprender como implementar ambas tecnologías.

Gracias de nuevo y saludos.