Struggling to implement a sidebar in HTML using jQuery and running into issues?

I am struggling to create a template that includes a navbar, sidebar, and other elements that can be used across multiple HTML files. Despite trying different approaches, including changing the jQuery version and downloading jQuery, I am unable to make it work. I have also downloaded assets directly into the directory. Currently, I am working on localhost using Chrome as my browser. The sidebar is sourced from Bootstrap's website.

<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous">
    </script>
    <script>
        $(function () {
            $("#sidebar").load("sidebar.html");
        });
    </script>
</head>

<body>
    <div id="sidebar"></div>
</body>

</html>

sidebar.html

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c0b0d1e0f3f4a514c514c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <title></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=DM+Serif+Text&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="sidebar" class="col-2 p-3 text-white bg-dark">
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#home" />
          </svg>
          AC
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#speedometer2" />
          </svg>
          Acura
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#table" />
          </svg>
          Alfa Romeo
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#grid" />
          </svg>
          Alpine
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#people-circle" />
          </svg>
          Aston Martin
        </a>
      </li>
    </ul>
    <hr>
  </div>
</body>

</html>
javascripthtmljquerycss

Answer №1

You've opted for the slim version of jQuery, which lacks AJAX functionalities such as load(). To access these features, consider switching to the full jQuery version.

For optimal performance, make sure your jQuery code executes only after the DOM has fully loaded. You can achieve this by enclosing your code within $(document).ready().

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<html>

<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous">
    </script>
    <script>
         // Ensure jQuery code runs after DOM has loaded
        $(document).ready(function () {
            $("#sidebar").load("sidebar.html");
        });
    </script>
</head>

<body>
    <div id="sidebar"></div>
</body>

</html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1815150e090e081b0a3a4f54495449">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <title></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=DM+Serif+Text&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="sidebar" class="col-2 p-3 text-white bg-dark">
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#home" />
          </svg>
          AC
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#speedometer2" />
          </svg>
          Acura
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#table" />
          </svg>
          Alfa Romeo
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#grid" />
          </svg>
          Alpine
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#people-circle" />
          </svg>
          Aston Martin
        </a>
      </li>
    </ul>
    <hr>
  </div>
</body>

</html>

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

Properties of the jQuery XMLHttpRequest object in callback functions of ajax requests

If you have an ajax callback function like the one below, how can you retrieve a status/response code or other information from the 'xhr' object? function showResponse(responseText, statusText, xhr) { } Here are some attempts to retrieve inform ...

jqueryxmlhttprequesthttpresponse

How to position two divs next to each other using CSS with just one adjustment

Is it possible to position two divs side by side, with one of them moving continuously up and down while containing an image? I attempted the following code: <div> <div style="margin:30px;width:100px;height:250px;position:relative;float:left; ...

htmlcssmove

What steps can I take to prevent receiving a 400 (Bad Request) error when using ajax PUT

Having an issue with sending data using JavaScript and AJAX. The objective is to send the data via PUT method to the server. var payload = 'id=' + id + '&brand=' + brand + '&model=' + model + '&country=' ...

javascriptnode.jsajaxexpressbad-request

Dompdf is outputting the HTML Bootstrap code as col-sm-x instead of col-lg-x

Currently, I am utilizing Dompdf in my PHP project to generate PDF reports. However, I have encountered an issue where the HTML bootstrap code does not render as expected on the PDF document. Specifically, when viewing the grid on a smaller device, it coll ...

htmltwitter-bootstrapdompdf

What is the best way to send information from a component on one page to a component on another page in React/Next.js?

Overview In my Next.js application, I have two pages: index.js and results.js. The index page features two Location Autocomplete fields that provide the address and LatLng of a selected location. This data is stored in a variable named markers on the inde ...

javascriptreactjsnext.jsreact-google-maps

Refreshing a section of a webpage using AJAX and PHP

After creating a RESTful API in PHP, I can easily register information by accessing the address . This registration process involves sending a POST request. Below is an overview of my method: File: api.php <?php /* File: api.php */ private function ...

javascriptphpjqueryajax

Tips for incorporating a smooth fade in and out effect into images within a Bootstrap 5 carousel

I'm currently working with a Bootstrap 5 carousel and trying to implement a transition effect where clicking the "next" arrow will smoothly fade out the current image before fading in the next one. This is necessary because the images in my carousel v ...

javascripthtmlcsscss-transitionsbootstrap-5

Incorporating multiple colors into a div with jQuery: A guide

I am looking for a way to create a legend by merging a specified number of colors within a div. I came across this useful Sample code that I have referenced. $.each(Array(50), function() { $("<div>").appendTo(document.body); }); var divs = $(&a ...

javascriptjquery

Exploring the possibilities of performing a POST request while querying JSON data and iterating through

I'm having some trouble figuring out what's wrong here. My goal is to make a table of data update when the user clicks on a different item quantity. I think I might be using the $.each() method incorrectly, as I'm not getting any visible r ...

jqueryajaxjson

Tips for fixing the issue of "module ./response not found" in Node.js Express

Whenever I execute the command $ npm start this error message appears > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8feefcfce6e8e1e2eae1fbbccfbea1bfa1bf">[email protected]</a> start > nodemon server.js ...

javascriptnode.jsexpressresponsenode-modules

Customize the Kendo UI by integrating it with HTML tables and dropdown lists

I am trying to utilize an HTML table as the data source for kendo-ui jQuery, and also enable inline editing with a drop-down list. To achieve this, I have written the code below: However, my issue arises when a user double clicks on a row of the table to ...

jquerykendo-uikendo-grid

Guiding you on exporting a Typescript class with parameters in Node.js

Trying to find the Typescript equivalent of require('mytypescriptfile')(optionsObject); This is the TS code provided: export class Animal { name: string; public bark(): string { return "bark " + this.name; } constructor(color:string) ...

javascriptnode.jstypescript

Troubleshooting the Expanded Row Problem in 'angular-ui-grid'

Following a recent update, the expanded row feature in Google Chrome (version 77) is not functioning correctly compared to version 76. Prior to the update, the expanded rows in 'angular-UI-grid' worked well on all browsers including Mozilla Firef ...

javascriptangularjsangular-ui-grid

Is it possible for using str_replace('<') to protect against code injected by users?

Recently, I've been working on a script that involves user input. In this script, I use echo str_replace('<', '&lt;', str_replace('&','&amp;',$_POST['input']));. It seemed like a solid f ...

phpjavascriptsecurityxss

Unleashing the power of conditional exports in package.json

Within my package.json, I define an exports section: "exports": { "import": "./dist/a.es.js", "require": "./dist/b.umd.js" }, However, during development, I wish to use different pa ...

javascriptnode.jsnpmpackage.json

Error in ng-repeat loop: detecting duplicates when none are present

$scope.subjects = [ "Computer Security", "Graphics and Multimedia", "Networks", "Computer Science and Engineering", "Game Design", "Programming", "Information Technology", "Software Engineering", "Technology Manageme ...

javascriptangularjsangularjs-ng-repeat

Jquery cascading menu

I'm currently experiencing difficulties in creating dropdown menus using jquery and css. Below is my HTML code: <nav class="topNav"> <ul> <li> <a href="#menu" class="menu-toggle"><img src ...

javascriptjquerycsshtmluser-interface

Troubleshooting the issue of onclick not functioning in JavaScript

My attempt to utilize onclick to trigger a function when the user clicks the button doesn't seem to be successful. For instance: function click(){ console.log('you click it!') } <input type='button' id='submitbutto ...

javascripthtmlonclick

Check for length validation including spaces in JavaScript

My code includes a functionality that calculates the length of characters in a text area using both JSP and JavaScript: <textarea class="textAreaLarge" id="citation" rows="20" cols="180" name="citation" ...

javascriptjavajqueryjsp

Changing the value of $i within a form

One of my web forms has 10 lines by default with checkboxes and textboxes. The code looks like this: <form method="post" action="actionhere"> <?php for($i=0; $i<10;$i++) { ?> <div class='clone_me'> <span> ...

phpjquery