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

Issue with Safari: Unable to trigger CSS :hover when tapping SVG element

Extract the text content from an HTML file while ignoring the tags to get the substring

The android webview is having trouble loading HTML that includes javascript

Loading jquery dialog content using ajax

SQL command for fetching additional data

Using Jquery to encase an element in a div while scrolling down and removing it while scrolling up

A comprehensive guide on creating a package that combines an href link with an <li> element

Verify the presence of blank space with javaScript

Sort the y-axis based on the earliest date

Dynamic Code for Removing List Items Based on Date

Creating a seamless user experience using jQuery and Ruby on Rails through the combination of AJAX functionality and ensuring

PHP and mysqli combine to create a versatile image slider with changing images

"Step-by-step guide on adding and deleting a div element with a double click

Is there a feature in JavaScript that allows for the creation of URLs?

Hide a header and bring it back after a 2-second delay

What is the best way to add an Apple iPhone-like effect to a menu list?

Clearing a textarea in jQuery that is populated with text

Retrieving an array from a JQuery For Each Loop

Accessing Facebook through Login with only a button visible

Is the Wordpress search bar a clickable link?