CODEWITHSUNDEEP
javascriptajax
Gavin
Gavin

Reputation: 2824

Fetching 2 ajax data simultaneously

I have 2 tables on my html that I would like to fill in with data that would be fetched on mySQL server via PHP. Pardon me if I am not making sense, relatively new to websites

I have declared my external .js files inside the html <body>

<script src="../bower_components/accounts/accounts.js"></script>
<script src="../bower_components/accounts/userinfoRetrieval.js"></script>

As you can see from my js files, the functions are auto called upon load of the html page.

I guess there is data conflict as I am fetching data from 2 php files at the same time. Hence my table values are not properly displayed. How can I go about fetching both the data and displaying them upon the page loads?

account.js

var tableContents;
var recipients =  new Array();
getRecipients();

function getRecipients() { //get account related info
        $.ajax({
            type: "GET",
            url: "../bower_components/accounts/accounts.php",
            dataType: "json",
            data: {
                json: JSON.stringify(recipients),
            },
            success: function(response){
                recipients = response;
                printData(recipients);
            }
        });
}

function printData(recipients){
    var x = "0";
    
    for(var i in recipients){
        if (i%2 == 0){
            tableContents = $("<tr class=\"even gradeC\">");
            jQuery('#accountsBody').append(tableContents);

        }
        else{
            tableContents = $("<tr class=\"odd gradeX\">");
            jQuery('#accountsBody').append(tableContents);
        }
        tableContents.append($("<td style=\"padding-left:18px\"><input name=\"select\" type=\"checkbox\" value=\""+ i + "\"></td>"));
        tableContents.append($("<td style=\"padding-left:18px\">" + recipients[i].recipientId + "</td>"));
        tableContents.append($("<td style=\"padding-left:18px\">" + recipients[i].username + "</td>"));
        tableContents.append($("<td style=\"padding-left:18px\">" + recipients[i].email + "</td>"));
        tableContents.append($("<td style=\"padding-left:18px\">" + recipients[i].phoneNo + "</td>"));
        
        if (recipients[i].status === x){
            tableContents.append($("<td style=\"padding-left:18px\">Unapproved</td>"));
        }
        else{
            tableContents.append($("<td style=\"padding-left:18px\">Approved</td>"));
        }
        tableContents.append($("</tr>"));
    }
    sorting();
}

userinfoRetrieval.js

var tableContents;
var userInfo =  new Array();

getuserInfo();


function getuserInfo() { //get account related info
        $.ajax({
            type: "GET",
            url: "../bower_components/accounts/userinfoRetrieval.php",
            dataType: "json",
            data: {
                json: JSON.stringify(userInfo),
            },
            success: function(response){
                userInfo = response;
                printData(userInfo);
            }
        });

}

function printData(userInfo){
    tableContents = $("<tr>");
    jQuery('#userinfoBody').append(tableContents);

    tableContents.append($("<td>" + userInfo[0].userID + "</td>"));
    tableContents.append($("<td>" + userInfo[0].username + "</td>"));
    tableContents.append($("<td>" + userInfo[0].email + "</td>"));
    tableContents.append($("<td>" + userInfo[0].dob + "</td>"));
    tableContents.append($("<td>" + userInfo[0].phoneNo + "</td>"));

    tableContents.append($("</tr>"));
}

enter image description here

The first row(elijah) should be placed on the top table, instead of the one it is currently wrongly placed on. Hence there were undefined values

Upvotes: 0

Views: 70

Answers (1)

marpe
marpe

Reputation: 198

I would be worried that printData is declared twice in the global scope, try renaming them in order to avoid naming conflicts.

I recommend using IIFE and use strict in order to avoid polluting the global namespace by mistake.

IIFE: https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

use strict: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Upvotes: 2

Related Questions