Recently, I've encountered a challenge with filling in data from a MySQL server via PHP into two tables in my HTML. As someone new to website development, I might not be articulating the issue correctly.
In my HTML, I've included my external .js files within the <body> tags:
<script src="../bower_components/accounts/accounts.js"></script>
<script src="../bower_components/accounts/userinfoRetrieval.js"></script>
Upon inspection of my JavaScript files, I noticed that the functions are automatically triggered when the HTML page loads.
However, fetching data from two PHP files simultaneously seems to cause a conflict, resulting in incorrect display of table values. How can I resolve this issue and ensure both sets of data are fetched and displayed correctly upon page load?
Here's a snippet from the accounts.js file:
// JavaScript code for fetching and displaying account information
// Code snippet goes here...
And here's a snippet from the userinfoRetrieval.js file:
// JavaScript code for fetching and displaying user information
// Code snippet goes here...
It appears that the data for the first row (elijah) should be displayed in the top table, rather than where it currently resides incorrectly. This led to undefined values being displayed.