OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How can I make sure all my links in my SPA keep the user within my SPA?

  • Thread starter Thread starter Jethro Blemur
  • Start date Start date
J

Jethro Blemur

Guest
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

Code:
<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

Code:
<!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

Code:
<?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.

<p>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.</p>
<p>index.php</p>
<pre><code><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>

</code></pre>
<p>header.php</p>
<pre><code><!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>
</code></pre>
<p>about.php</p>
<pre><code><?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>
</code></pre>
<p>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!</p>
<p>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.</p>
 

Latest posts

ن
Replies
0
Views
1
نعمان منذر محمود الجميلي
ن
Top