Imprimir Página - Llamar dos funciones AJAX en onChange

Título: Llamar dos funciones AJAX en onChange
Publicado por: KateLibby en 19 Octubre 2011, 16:55 pm

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:

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:

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:

<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.

Título: Re: Llamar dos funciones AJAX en onChange
Publicado por: adastra en 19 Octubre 2011, 17:26 pm

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?

Título: Re: Llamar dos funciones AJAX en onChange
Publicado por: KateLibby en 19 Octubre 2011, 18:02 pm

Os pongo la función objetoAjax()

Código:

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 ;D

Título: Re: Llamar dos funciones AJAX en onChange
Publicado por: fran800m en 19 Octubre 2011, 20:26 pm

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

Título: Re: Llamar dos funciones AJAX en onChange
Publicado por: KateLibby en 20 Octubre 2011, 10:52 am

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:

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:

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:

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

Gracias por vuestras respuestas.

Título: Re: Llamar dos funciones AJAX en onChange
Publicado por: adastra en 20 Octubre 2011, 11:01 am

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...

Título: Re: Llamar dos funciones AJAX en onChange
Publicado por: fran800m en 20 Octubre 2011, 11:54 am

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:

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:

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.

Título: Re: Llamar dos funciones AJAX en onChange
Publicado por: KateLibby en 26 Octubre 2011, 11:29 am

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.

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: KateLibby en 19 Octubre 2011, 16:55 pm