Llamar dos funciones AJAX en onChange

[KateLibby]

Tengo un formulario en el que habrá tres combos. Según lo que se elija en el primer combo se llenarán los otros dos (es decir, el segundo y el tercero son independientes el uno del otro). Para llenar el combo 2 y 3 tengo una función para cada uno, la cual llama a su archivo php correspondiente mediante AJAX.

Mi problema es que no consigo llamar a las dos funciones cuando hago el onChange del <select>. Lo hago de la siguiente manera:

Código [Seleccionar] Expandir

function AjaxDias(datos, result){
divResultado = document.getElementById(result);
        ajax=objetoAjax();
        ajax.open("GET", "ajax_dias.php?id=" + datos);
        ajax.onreadystatechange=function() {
               if (ajax.readyState==4) {
                       divResultado.innerHTML = ajax.responseText
               }
        }
        ajax.send(null)
}

Código [Seleccionar] Expandir

function AjaxHoras(datos, result){
divResultado = document.getElementById(result);
        ajax=objetoAjax();
        ajax.open("GET", "ajax_horas.php?id=" + datos);
        ajax.onreadystatechange=function() {
               if (ajax.readyState==4) {
                       divResultado.innerHTML = ajax.responseText
               }
        }
        ajax.send(null)
}

Código [Seleccionar] Expandir

<select onChange=" AjaxDias(this.value, 'dias'); AjaxHoras(this.value, 'horas') ">

Si en las funciones, en lugar del código AJAX que tengo ahora, les pongo simplemente un alert('Hola'), por poner un ejemplo, sí que me ejecuta las dos, pero con el código AJAX sólo me ejecuta una.

¿Alguna idea de cómo puedo llamar las dos funciones en onChange? Gracias.

[adastra]

Vaya que raro, deberian ejecutarse ambas... 
que hace la función objetoAjax()?
por otro lado, te salen errores de javascript en el navegador o simplemente no se ejecutan?
estas seguro invocando esto: "ajax.send(null)" no te sale un error javascript?

[KateLibby]

Os pongo la función objetoAjax()

Código [Seleccionar] Expandir

function objetoAjax(){
       var xmlhttp=false;
       try {
              xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
              try {
                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (E) {
                      xmlhttp = false;
              }
       }

       if (!xmlhttp && typeof XMLHttpRequest!='undefined') {

              xmlhttp = new XMLHttpRequest();


       }
       return xmlhttp;
}

El navegador no me da errores (bueno, sí me da uno pero es en un .css y supongo que no tiene importancia). Simplemente es que no se ejecuta una de las funciones. Sólo se ejecuta la segunda.

Y la verdad es que no estoy muy segura de lo de ajax.send(null). En realidad no lo estoy nada. He hecho muy poca cosa con AJAX y este código es copiado y pegado de uno que me funcionaba, pero aplicándole los cambios necesarios  

[fran800m]

Hace tiempo que no toco el tema AJAX y callbacks y tal pero lo mejor seria que hagas una sola llamada a función, y que cuando se haya finalizado se llame a la segunda.

Como lo tienes ahora se lanza la segunda llamada antes de acabar la primera, en teoria no deberia pasar nada pero .... Como te digo se lanzaria la segunda cuando sabes que ha acabado la primera.

Además, y no sé si tiene que ver, las variables / objetos no declaradas con var, ¿en javascript era locales o globales?

En vez de poner en las 2 funciones ajax=objetoAjax(); pon
var ajax=objetoAjax();

o incluso
var ajax1=objetoAjax();
var ajax2=objetoAjax();

Igual estoy desbarrando, peor en el peor de los casos siempre es buena práctica declarar las variables /objetos, de hecho la consola de errores de FF te da el "warning" xD

[KateLibby]

He hecho los cambios que propones, fran800m, pero aún así no lo consigo.

Lo de llamar la segunda función cuando termine la primera ya lo probé y no funcionó, aunque igual no lo hice bien. Sería así?

Código [Seleccionar] Expandir


function AjaxDias(datos, result){
divResultado = document.getElementById(result);
        ajax=objetoAjax();
        ajax.open("GET", "ajax_dias.php?id=" + datos);
        ajax.onreadystatechange=function() {
               if (ajax.readyState==4) {
                       divResultado.innerHTML = ajax.responseText
               }
        }
        ajax.send(null)
        AjaxHoras(datos, 'horas')
}


Código [Seleccionar] Expandir


function AjaxHoras(datos, result){
divResultado = document.getElementById(result);
        ajax=objetoAjax();
        ajax.open("GET", "ajax_horas.php?id=" + datos);
        ajax.onreadystatechange=function() {
               if (ajax.readyState==4) {
                       divResultado.innerHTML = ajax.responseText
               }
        }
        ajax.send(null)
}


Código [Seleccionar] Expandir

<select onChange=" AjaxDias(this.value, 'dias')">
...


Gracias por vuestras respuestas.

[adastra]

a lo mejor me equivoco, pero puede ser que falla por la invocación a "ajax.send(null)" desde las dos funciones, intenta hacerlo como lo tienes pero quitando esa invocación desde la primera función, incluyela solamente en la segunda función, y que sea en ese punto el momento en el que realmente se haga el envio de datos al servidor...

[fran800m]

A ver he terminado entrando en Google porque me termino liando con la sintaxis aunque el concepto lo tengo claro.
La segunda función hay que llamarla cuando sepamos que la primera ha acabado, como lo tienes puesto sigue siendo lineal. Yo me refiero:

Código [Seleccionar] Expandir

function AjaxDias(datos, result){
divResultado = document.getElementById(result);
        var ajax=objetoAjax();
        ajax.open("GET", "ajax_dias.php?id=" + datos, true);
        ajax.onreadystatechange=function() {
               if (ajax.readyState==4) {
                       divResultado.innerHTML = ajax.responseText;
                       AjaxHoras(datos, 'horas');
               }
        }
        ajax.send(null);
}

Código [Seleccionar] Expandir

function AjaxHoras(datos, result){
divResultado = document.getElementById(result);
        var ajax=objetoAjax();
        ajax.open("GET", "ajax_horas.php?id=" + datos, true);
        ajax.onreadystatechange=function() {
               if (ajax.readyState==4) {
                       divResultado.innerHTML = ajax.responseText;
               }
        }
        ajax.send(null);
}

Además de ponerte la función en su sitio he añadido la declaracion de los objetos ajax con var y completa los ; (vale igual no hace falta, pero lo hago).

Además a los métodos open les faltaba el tercer parámetro, el que indica el asincronismo. No he probado nada, ya nos cuentas, igual en la falta del tercer parámetro está el misterio.

[KateLibby]

Gracias por vuestras respuestas.

Al final hubo cambios en cómo tenía que ser el formulario y me he apañado sin utilizar AJAX. De todas formas seguro que en otro momento me encuentro con el mismo problema. En cuanto lo pruebe, os cuento.

Saludos y gracias.