2

Estoy haciendo un programita el cual cuando el usuario de clic, este invoque 2 funciones que hacen cosas diferentes.

Cuando doy clic se envían ambas (ya lo verifiqué en las herramientas de desarrollador de Chrome) y de hecho responden correctamente ambas al PHP, sin embargo cuando regresan, solo me aparece el segundo div lleno, el primero no se llena.

Intenté invocar la función 2 en la 1, pero ahora se ejecuta la primera y no la segunda.

Lo mandé a llamar justo debajo de esta línea:

            document.getElementById("employee").innerHTML = xmlhttp.responseText;
             }function getInteractions(str);
     };

pero no funciono :'(

¿Me podrían recomendar que pueda hacer? Aquí esta parte de mi código

JAVASCRIPT + AJAX

function getEmployees(str) {

    if (str == "") {
        document.getElementById("employee").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("employee").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", "getEmployees.php?q=" + str, true);
        xmlhttp.send();
    }
}



function getInteractions(strg) {
    if (strg == "") {
        document.getElementById("interaction").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("interaction").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", "getInteractions.php?a=" + strg, true);
        xmlhttp.send();
    }
}

HTML

<input type="text" id="theid" name="theid" placeholder="Escribe tu número de empleado" />
<button onclick="getEmployees($(#theid).val());getInteractions($(#theid).val());">Enviar</button>
<div id="employee"></div>
<div id="interaction"></div>
4
  • 2
    una duda, ya que usas jQuery, ¿por que no haces el ajax con jQuery directamente? ¿es alguna clase de ejercicio o aprendizaje? Commented el 1 jul. 2016 a las 0:24
  • Hola, perdón, no es un ejercicio, sigo estudiando pero me dieron la oportunidad de desarrollar algo en mi empresa. ¿Crees poder ayudarme? Commented el 1 jul. 2016 a las 0:28
  • el código html que has adjuntado no es correcto, no puede corresponder al problema que mencionas.
    – PA.
    Commented el 1 jul. 2016 a las 8:08
  • a mi me funcionó perfecto al ejecutar dos archivos php en la misma función javascript con diferentes ajax, pero solo cuando se envian al tiempo, si se necesita envair una tras otra se usa async: false, dentro del ajax como indican anteriormente Commented el 14 dic. 2021 a las 22:47

4 respuestas 4

2

intenta utilizar la función when de jquery. El siguiente código fue como yo resolví el mismo problema que tienes, necesitaba llenar algunos catálogos y consultar la información actual para que el usuario pudiera editar los datos.

    $.when(
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "localhost/sistema",
            async: false,
            username: "cd",
            password: "****",
            success: function(data) {
                distritos = data;
            }
        }),
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "localhost/sistema",
            async: false,
            username: "cd",
            password: "****",
            success: function(data) {
                reclusorios = data;
            }
        }),
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "localhost/sistema",
            async: false,
            username: "cd",
            password: "****",
            success: function(data) {
                delitos = data;
            }
        }),

        $.ajax({
            type: "GET",
            dataType: "json",
            url: "localhost/sistema",
            async: false,
            username: "cd",
            password: "****",
            success: function(data) {
                datos = data;
            }
        })
    ).done(function() {
       // escribir html o lo que necesites...
}

En el done ya tendrías todos los datos que consultas con las peticiones AJAX y que guardas en tus variables, en mi caso son delitos,etc.

1

Haz olvidado poner las comillas en el id del elemento, en ambos casos.

Debes reemplazar, $(#theid) por $('#theid'),

Ejemplo...

<button onclick="getEmployees($('#theid').val()); getInteractions($('#theid').val());">
   Enviar
</button>

Aquí te dejo una demo, no puedo ponerla aquí por que los stack snippets no soportan ajax.

5
  • Si, fue un error de dedo, de hecho, con o sin comas, sigo con el problema, no puedo invocar a las 2 funciones en un click. Commented el 1 jul. 2016 a las 15:34
  • Fíjate bien en el ejemplo que deje, tu solución funciona bien. Commented el 1 jul. 2016 a las 15:41
  • Gracias, eso ya lo había probado, de hecho si funciona si ponemos fijo el resultado en JS. Mi problema radica en que, cuando doy click al botón, se arma todo el xmlhttp y se envía la primera y regresa con un resultado y lo plasma en el div correspondiente, después lanza la segunda función regresa con la respuesta y lo plancha en el div correspondiente a la segunda función, per oel resultado del primer div desaparece y solo queda el segundo. :( Commented el 1 jul. 2016 a las 19:24
  • No es así, se lanzan en paralelo. Y llegan de forma asincrónica . Cuando haces send, la función retorna de forma inmediata Commented el 1 jul. 2016 a las 23:42
  • asegurate de no tener otra cosa (css, javascript) que este alterando el resultado, con esas comillas el codigo funciona bien. Commented el 2 jul. 2016 a las 0:25
0

El error se presenta debido a que la repuesta que obtienes de AJAX se esta ejecutando de forma asincrona, por lo tanto se debe colocar async en false dentro de tu AJAX async: false

0

efectivamente, como dice @fancer el problema es que estás haciendo llamadas simultáneas a esas funciones. Te va a dar errores si finaliza primero la llamada que depende de la otra.
Pon a false el último parámetro de la función:

xmlhttp.open("GET", "getInteractions.php?a=" + false);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.