I recently started working on my first SPA. There’s some basic JavaScript and php on it right now. Anyway, the biggest issue I’m having right now, is how can I put links inside my SPA without them sending me into an entirely new page and basically ruining the whole purpose of making my website an app. Here is my code. I will explain more after.
index.php
<html>
<head>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<?php include './includes/header.php'; ?>
<div id="main-content">
<!-- Content will be loaded here dynamically -->
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Function to load content into the main-content div
const loadContent = (page) => {
fetch(page)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
document.getElementById('main-content').innerHTML = data;
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
document.getElementById('main-content').innerHTML = '<p>Error loading page</p>';
});
};
// Load the default page
loadContent('./pages/home.php');
// Handle navigation click
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const page = e.target.getAttribute('data-page');
if (page) {
loadContent(page);
} else {
console.error('The data-page attribute is missing on the clicked link.');
}
});
});
});
</script>
</body>
</html>
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Jethro Blemur</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sevillana&family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#navbar{
position: fixed;
top: 1vh;
right: 1%;
width: 15%;
padding: .5% .1%;
box-shadow: 10px 10px 10px 1px black;
text-align: center;
border-radius: 20px;
background-color: white;
}
#navbar a {
font-size: 40px;
margin: 1%;
text-decoration: none;
color: turquoise;
text-shadow: 2px 2px 4px #000000;
transition: color .5s ease;
}
#navbar a:visited{
color: turquoise;
text-shadow: 2px 2px 4px #000000;
}
#navbar a:hover{
color:white;
background-color: aqua;
}
#navbar a:active,
#navbar a.active{
border-bottom: 3px solid white;
transition: border-bottom .5s ease;
}
#navbar a:active:hover,
#navbar a.active:hover {
border-bottom: 3px solid turquoise;
}
</style>
</head>
<body>
<nav id="navbar">
<a href="#" class="nav-link" data-page="./pages/home.php">Home</a>
<a href="#" class="nav-link" data-page="./pages/projects.php">Projects</a>
<a href="#" class="nav-link" data-page="./pages/about.php">About</a>
<a href="#" class="nav-link" data-page="./pages/contact.php">Contact</a>
</nav>
</body>
</html>
about.php
<?php $currentPage = 'about'?>
<link rel="stylesheet" href="./styles/style.css">
<head>
<title>About me</title>
</head>
<body id="sboutpage">
<div id="container">
<h2>About Me</h2>
<p>
Some text for now
</p>
</div>
</body>
Basically, using my navbar (the contents are in the header.php code) the app works like it should. It just displays the new portion of the app without making me navigate to a new page. However, when I click on one of my quicklinks, it makes me navigate to a new page in other words, it makes me leave the app, which is not what I want. What do I do to make it so that whenever I click on any link in the website, it keeps me in the app? Feel free to ask me any questions if I was not clear enough!
Chatgpt was not very helpful it basically told me to just combined all my pages into one, which defeats the purpose of an app. It would make my code a bit harder to read. Better to have a file for every page.