In the script at the bottom I get the result from /php/get/items-sold.php and put it into the div called items-list. It's not supposed to actually go to the page /php/get/item-sold.php, but on the FIRST load of my site it does - or it goes to the banner php file or the sidebar php file which are loaded in sidebar.js. But on subsequent loads it works entirely like it's supposed to.
I just tried putting the code that loads it in an event listener for DOMContentLoaded, as you can see in my code below, but it fixed nothing.
What could be causing this and how can I fix it?
<!DOCTYPE HTML>
<html>
<head>
<title>Crochet Store</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/assets/css/main.css" />
</head>
<body class="is-preload">
<script>
// to eliminate Flash Of Unstyled Content
const loadingOverlay = document.createElement("div");
loadingOverlay.id = "loading-overlay";
loadingOverlay.innerHTML = "<div class='lds-ring'><div></div><div></div><div></div><div></div></div>";
document.getElementsByTagName("body")[0].prepend(loadingOverlay);
</script>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<!-- sidebar.js will fill this -->
<header id="header"><p id="js-disabled-warning">You have javascript disabled... the site needs javascript to function. Please enable javascript :(</p></header>
<!-- Banner -->
<!-- sidebar.js will fill this -->
<section id="banner"></section>
<!-- Section -->
<section>
<header class="major">
<h2>Items I Sell:</h2>
</header>
<div id="items-list"></div>
</section>
</div>
</div>
<!-- sidebar.js will fill this -->
<div id="sidebar"></div>
</div>
<!-- Scripts -->
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/sidebar.js"></script>
<script src="/assets/js/util.js"></script>
<script src="/assets/js/main.js"></script>
<script>
function resizeBannerImg() {
const width = document.getElementById("banner-img").clientWidth;
$("banner-img").attr("height", width);
}
window.addEventListener("DOMContentLoaded", function() {
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const response = this.responseText;
$("#items-list").html(response);
};
xmlhttp.open("GET", "/php/get/items-sold.php");
xmlhttp.send();
});
</script>
</body>
</html>