Unable to create a universal <header> and <footer> to be displayed across all pages

After trying to separate the <header> and <footer> into external files, everything seemed to work fine in the console. However, when running the code, it ended up returning undefined.

This is the HTML for the Footer:

<footer id="footer" class="footer mt-auto py-3 bg-light">
<div class="container">
    <div class="col-12 text-center">
        <a style="text-anchor: middle">© 2021 AlexInCube</a>
    </div>
</div>

Here's a snippet from main.html:

<script>document.write(importHTMLdata("content/basement.html"))</script>

The scripts.js file contains this function:

function importHTMLdata(path){
    $.get(path, function(html_string)
    {
        console.log(html_string)
        return html_string;
    });

Answer №1

Avoid using document.write as it can cause the page to be wiped if executed after the page has loaded.

Instead, include this in your JavaScript file:

$(function() { // runs on page load
  const importHTMLdata = path => { // create a function that takes a path
    $.get(path, function(html_string) { // get the content from the specified path
      $("body")[path.indexOf("footer") != -1 ? "append" : "prepend"](html_string); // append to body if footer, prepend if not footer
    });
  }
  importHTMLdata("content/header.html"); // load header
  importHTMLdata("content/footer.html");  // load footer
});
<script src="scripts.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving JSON information from a PHP file and saving it as a global variable

Currently, I am in the process of developing a cordova mobile application and my goal is to extract all the data from a PHP page that outputs JSON data. This information will then be stored in a global variable for easy local access. Here is an example of ...

Navigating the quandary of mocking with Jasmine in Karma while unit testing AngularJS

I am currently in the process of writing tests for certain services using karma and jasmine. I have a question regarding whether or not I need to mock a service's dependency that utilizes $http. PS: I am already utilizing $httpBackend to mock any GET ...

Retrieve information from specific dates by using a datepicker tool

Hey there, I'm trying to implement a datepicker calendar that allows me to select two dates and then click a button to display all the data between those dates. Here is my code snippet... <?php include_once 'header.php'; $con = mysqli_ ...

During post-processing, the elimination of lens flares can sometimes lead to an error known as "copyTexImage2D: framebuffer is

After looking at the lens flares example here: , I'm encountering an issue with post-processing this particular scene. The blocks display correctly, but the light sources and lens flares are missing. Additionally, I am receiving several warnings in t ...

Need help resolving an issue with an HTML header that's overlapping in JavaScript?

Hey there! I was working on implementing a dynamic header that resizes as you scroll on the page. I also decided to try out Headroom as an additional solution, and it seems to be functioning well in terms of hiding the header. You can check out my progress ...

`In Vue.js, it is not possible to access a data property within a

I encountered an issue while attempting to utilize a property of my data within a computed method in the following manner: data() { return { ToDoItems: [ { id: uniqueId("todo-"), label: "Learn Vue", done: false }, ...

Switching the span class with jQuery when a link is clicked

When I click on the $menulink, I want the class of the span inside .menu-link to toggle. I have attempted the code below, but it doesn't seem to work properly: $(document).ready(function() { $('body').addClass('js'); var $menu = $ ...

jquery fails to alter label:before

I have encountered a peculiar issue with jQuery and labels. It's quite strange because everything seems to work fine when I change the background color of a label or its font-weight, but using the :before selector doesn't seem to work. Any thoug ...

Is it possible for HTML to call library scripts in the sidebar?

I recently encountered an issue with a sidebar created in HTML on Spreadsheets. Everything was working perfectly until I moved the code to the main library where all the code is managed. Now, it seems that the function used by the sidebar is undefined. How ...

Using Ajax to seamlessly replace content with a smooth fade effect

Is it possible to add a fade effect to the code below, where the content of "demo" div is replaced with the content of "newpage.html"? <button onclick="loadDoc()">Click here</button> function loadDoc() { var xhttp = new XMLHttpRe ...

Updating image content on the fly in a popover

Here is my unique HTML code: <div class="col-12 custom-file" data-toggle="popover-hover"> <input type="file" id="fileUpload" class="custom-file-input" accept=".jpg,.png,.jpeg"> < ...

I'm having trouble modifying the backdrop to 'true' or removing it after setting it to 'static' in Bootstrap. Can anyone help me troubleshoot this issue?

I have been encountering an issue with changing the backdrop setting from 'static' to 'true' in Bootstrap modal. Here is the code I am using: $('#modal').modal({backdrop: 'static', keyboard: false, show: true}); ...

When using XML, what situations can cause jquery's .attr() and getAttribute() to provide varying results?

When I receive an XML response from a server and parse it in jquery (jQuery 1.8.2 on Chrome 23.0.1271.64 and Firefox 15.01) to retrieve various attributes, it works correctly most of the time. However, occasionally the attr() call returns the entire elemen ...

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

What is the best way to customize the appearance of a toggle switch using useStyles in Material UI, rather than withStyles?

I need help with customizing the styling of an input form switch in Material UI. I want the track and button to turn red when the switch is on, similar to this example. I have tried using the withStyles method following examples on the Material UI website, ...

Utilizing the Bootstrap grid system after removing a div element

Currently, I am designing a dashboard layout with the flexibility of displaying four 'squares' based on a user's role. The top row typically consists of two squares, with one occupying around 30% of the width and the other around 70%. This ...

Determine the name of the time zone using JavaScript

Currently, I am developing a React application and facing an issue where the timezone is detected as 'Etc/GMT-1' instead of the desired format 'Africa/Bangui'. This problem seems to be specific to my machine as it persists even when usi ...

Tips for identifying the cause of a memory leak in browser notifications

I am looking to implement browser notifications in a browser extension. However, I have noticed that the memory usage does not decrease after closing the notification. Can someone explain why this may be happening? Allow StackOverflow show notifications i ...

Numerous routers available for enhancing functionality in an Ember application

Can an Ember app have multiple router.js files? By default, one router.js file will look like this: import Ember from 'ember'; import config from '../../config/environment'; var Router = Ember.Router.extend({ location: config.locat ...

Tips for avoiding the persistence of an old array on the screen after refreshing and showing the new, updated array

Currently, my task involves displaying array values on a webpage. The array data is sourced from a real-time database in Firebase. After adding new values to the array or inputting another value into the database on the previous page, we are redirected to ...