How to invoke 2 functions in Javascript, AJAX and PHP

Question

How to invoke 2 functions in Javascript, AJAX and PHP

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)

2

I'm doing a little program which when the user clicks, it invokes 2 functions that do different things.

When I click they send both (I checked it in the Chrome developer tools) and in fact they respond correctly to both PHP, however when they return, only the second div appears full, the first one is not filled.

I tried to invoke function 2 on the 1, but now the first one is executed and not the second one.

I sent it to call just below this line:

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

but it did not work: '(

Could you recommend me what I can do? Here is part of my code

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>

javascript jquery ajax

asked by Alberto Siurob 01.07.2016 в 01:32

source

4 answers

How to date format a field obtained from the database? As insert invisible characters (hidden) in a text

score 2 · Answer 1

try to use the jquery when function. The following code was how I solved the same problem that you have, I needed to fill some catalogs and consult the current information so that the user could edit the data.

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

In the done you would already have all the data that consultations with the AJAX requests and that you keep in your variables, in my case they are crimes, etc.

score 1 · Answer 2

You forgot to put the quotes in the id of the element, in both cases.

You must replace, $(#theid) with $('#theid') ,

Example ...

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

Here I leave you a demo , I can not put it here because stack snippets do not support ajax .

score 0 · Answer 3

effectively, as @fancer says the problem is that you are making simultaneous calls to those functions. It will give you errors if you end the call that depends on the other first.
Set the last parameter of the function to false:

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

score 0 · Answer 4

0

The error occurs because the response you get from AJAX is running asynchronously, so async must be placed in false within your AJAX async: false

answered by 20.11.2016 в 21:16