What is the best way to navigate between elements using AJAX?

Question

What is the best way to navigate between elements using AJAX?

My experience in Ajax is minimal. I've managed to create two <li> elements with <a> elements inside, each linking to different HTML files. My goal is for clicking on a link to automatically load the corresponding HTML file without refreshing the page, but it's not functioning as expected. When I click on a link, nothing occurs. Appreciate any assistance! Using jQuery with Ajax.

FIRST HTML FILE

$('li').find('a').on('click',function(event) {
    event.preventDefault();

    var href = $(this).attr('href');

    $('.main-content').load(href + 'content-ajax');
});

.ajax-img {
    margin-top: 8em;
    float: left;
}

.ajax-img2 {
    float: left;
    margin-left: 10em;
    margin-top: -5em;
}

.ajax-nadpis {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
    font-size: 2.7em;
}

.ajax-text {
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 1.5em;
    margin-top: -13em;
}

nav {
    display: flex;
    
}

ul li {
    display: inline-block;
    padding-left: 18em;
    margin-top: 2em;
    
}

ul li:hover {
    cursor: pointer;
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">
<head>

//FIRST HTML PAGE

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Responsive Website</title>
    <link rel="stylesheet" href="css/styles2.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Tinos&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
 
    <h2 class="podnadpis">Automatic loading articles using ajax (without page refresh)</h2>
    <section class="ajax">
        <div class="section-container">
            <div class="img-holder">
                <img src="ajax-IMGs/talltales.png" class="tall-tales-logo" alt="logo tall tales">
            </div>
        </div>
        
    </section>
    
    <article id="article">
        <nav class="navigation">
            <ul>
                <li><a href="ajax1.html">Shroudbreaker</a></li>
                <li><a href="javascript.html">Skeleton Lords</a></li>
            </ul>
        </nav>
        <div class="main-content">
        <div class="content-ajax">
            <img src="ajax-imgs/graymarrow.png" class="ajax-img" alt="">
                <h3 class="ajax-nadpis">SKELETON LORDS</h3>
                <p class="ajax-text">Tall Tales – Shores of Gold introduces Skeleton Lords, imposing characters clambering out of the oldest legends into the present day. Meaner than any of the bony marauders you’ve fought so far, these intimidating adversaries can only be encountered by following the story as it unfolds. Be prepared for anything when seeking out Skeleton Lords – these resourceful foes will resist any attempt to send them back to their resting place beneath the sands. They’re big, tough and full of surprises…</p>
            </div>
        </div>
    </article>

    <script src="javascript/jquery.js"></script>
    <script src="javascript/jquery.parallax.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>

SECOND HTML FILE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Responsive Website</title>
    <link rel="stylesheet" href="css/styles2.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Tinos&&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
    
    
    <article id="article">
        <nav class="navigation">
            <ul>
                <li><a href="ajax1.html">Shroudbreaker</a></li>
                <li><a href="javascript.html">Skeleton Lords</a></li>
            </ul>
        </nav>
        <div class="main-content">
        <div class="content-ajax">
        <img src="ajax-imgs/shroudbreaker.png" class="ajax-img2" width=700px height=600px  alt="">
            <h3 class="ajax-nadpis">SHROUDBREAKER</h3>
            <p class="ajax-text">The Shroudbreaker is the first Tall Tale in the Shores of Gold Arc. The Tale Book can be voted for on the table next to the Mysterious Stranger in the Tavern of any Outpost. The Tall Tale can be voted to be cancelled at the Ship's Voyage Table. Players can unlock three Checkpoints during this Tall Tale. If they wish to continue the Tall Tale at a later time, they can vote on any acquired Checkpoints at the Voyage Table.</p>
        </div>
        </div>
    </article>

    <script src="javascript/jquery.js"></script>
    <script src="javascript/jquery.parallax.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>

The issues I'm encountering are shown in this image: https://i.stack.imgur.com/0VgsT.png

html jquery css ajax

Answer 1

Answer №1

Implementing AJAX to Load Page Content

To streamline the process of updating elements like headers and footers across multiple files, consider utilizing a templating engine such as PHP. This allows for easy modification in one central location rather than editing numerous individual files.

For seamless navigation without page refreshes, Ajax plays a crucial role:

header.php:

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title><?= $page_title ?></title>
    <link rel="shortcut icon" href="#!" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <nav id="nav">
        <a href="index.php">Home</a>
        <a href="about.php">About</a>
        <a href="contact.php">Contact</a>
    </nav>

and footer.php:

    <footer>
        &copy; <?= date("Y") ?> - Lorem Ipsum
    <footer>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>

</body>
</html>

Create individual files index.php, about.php, and contact.php following this structure with unique content under each <h1> tag.

<?php
$page_title = "Home";
include 'header.php';
?>

<div id="page">
    <div id="content">
        <h1>This is Home page</h1>
    </div>
</div>

<?php
include "footer.php";
?>

<?php
$page_title = "About";
include 'header.php';
?>

<div id="page"gt;
    <div id="content"$gt;
        <h1>This is About page</h1>
    </div>
</div>

<?php
include "footer.php";
?>

<?php
$page_title = "Contact";
include 'header.php';
?>

<div id="page">
    <div id="content">
        <h1>This is Contact page</h1>
    </div>
</div>

<?php
include "footer.php";
?>

Here's the JS code from script.js:

jQuery(function ($) {
    // Handle history states
    window.onpopstate = function (e) {
        if (e.state) {
            $("#content").html(e.state.html);
            document.title = e.state.pageTitle;
        }
    };

    $("#nav").on("click", "a", function (ev) {
        ev.preventDefault(); 

        const URL = $(this).attr("href"); 
        const name = $(this).text(); 
        document.title = name;

        // AJAX LOAD and pushState for browser history
        $("#page").load(URL + " #content", function (data) {
            const html = $(data).find("#content").html();
            const pageTitle = $(data).find("h1").text();
           
            window.history.pushState({html, pageTitle}, "", URL);
        });
    });
});

Ensure that you have PHP installed and configured in your Environment Variables. Launch a PHP cli-server by running the command below in your project directory:

php -S localhost:8080

Navigate to http://localhost:8080 in your browser to view the implementation. This approach is search-engine optimized, enabling crawlers to index all pages efficiently.

Answer 2

Implementing AJAX to Load Page Content

To streamline the process of updating elements like headers and footers across multiple files, consider utilizing a templating engine such as PHP. This allows for easy modification in one central location rather than editing numerous individual files.

For seamless navigation without page refreshes, Ajax plays a crucial role:

header.php:

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title><?= $page_title ?></title>
    <link rel="shortcut icon" href="#!" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <nav id="nav">
        <a href="index.php">Home</a>
        <a href="about.php">About</a>
        <a href="contact.php">Contact</a>
    </nav>

and footer.php:

    <footer>
        &copy; <?= date("Y") ?> - Lorem Ipsum
    <footer>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>

</body>
</html>

Create individual files index.php, about.php, and contact.php following this structure with unique content under each <h1> tag.

<?php
$page_title = "Home";
include 'header.php';
?>

<div id="page">
    <div id="content">
        <h1>This is Home page</h1>
    </div>
</div>

<?php
include "footer.php";
?>

<?php
$page_title = "About";
include 'header.php';
?>

<div id="page"gt;
    <div id="content"$gt;
        <h1>This is About page</h1>
    </div>
</div>

<?php
include "footer.php";
?>

<?php
$page_title = "Contact";
include 'header.php';
?>

<div id="page">
    <div id="content">
        <h1>This is Contact page</h1>
    </div>
</div>

<?php
include "footer.php";
?>

Here's the JS code from script.js:

jQuery(function ($) {
    // Handle history states
    window.onpopstate = function (e) {
        if (e.state) {
            $("#content").html(e.state.html);
            document.title = e.state.pageTitle;
        }
    };

    $("#nav").on("click", "a", function (ev) {
        ev.preventDefault(); 

        const URL = $(this).attr("href"); 
        const name = $(this).text(); 
        document.title = name;

        // AJAX LOAD and pushState for browser history
        $("#page").load(URL + " #content", function (data) {
            const html = $(data).find("#content").html();
            const pageTitle = $(data).find("h1").text();
           
            window.history.pushState({html, pageTitle}, "", URL);
        });
    });
});

Ensure that you have PHP installed and configured in your Environment Variables. Launch a PHP cli-server by running the command below in your project directory:

php -S localhost:8080

Navigate to http://localhost:8080 in your browser to view the implementation. This approach is search-engine optimized, enabling crawlers to index all pages efficiently.

What is the best way to navigate between elements using AJAX?

Answer №1

Implementing AJAX to Load Page Content

Similar questions

Using CSS and Bootstrap together in the Yii2 framework

the prepared statement resulting in an error within the while loop

I'm having trouble finding a solution to remove the white space

What is the best way to obtain a reference to the parent form element within an AngularJS directive?

What is the best way to customize the small square area found between the vertical and horizontal scrollbars?

Tips for scrolling a div that has too much content within a webpage

When the state inspection fails due to a missing object property, the function will not work as intended

When Flash components are hidden and then shown again, they monopolize the mouse wheel scrolling function, causing issues in

Policy regarding copyright content removal and protection of privacy

To Ajax or not to Ajax, that is the question

Is it possible to create a CSS code that targets specific browsers for a particular style to be applied?

VueJS does not support loading Jquery

Creating a secure API design to restrict public access when integrated with AJAX functionalities

Are there ways to implement Vue.js transitions without directly setting the height in the code?

Tips for creating a stylish scrollbar in a React Material-Table interface

The issue with Grid component in Nested Single file Component

Transform JavaScript variables into CSS variables

How to customize the background of radio buttons in HTML

Arranging elements in columns using Bootstrap

Tips for retrieving the text enclosed within a <span> tag using jQuery