Load an external page, automatically update the URL in the browser, and ensure that the page remains in place even if

I am in the process of creating a website demo using Bootstrap 3 to ensure compatibility with IE7/8. The fixed navigation features 4 menu anchors that lead to landing pages for different subjects, each with dropdown menus containing a varying number of sub-menus.

The requirement is for the page to remain static while fetching content from external plain .html pages. I have achieved this by implementing:

$(function(){
    $("#submenu a").click(function(e){
        e.preventDefault(); //To prevent the default anchor tag behavior
        var url = this.href;
        $(".container").load(url);
    });
});

Issue at Hand

  • I am struggling to maintain consistent URLs when refreshing the page using the location.hash method.
  • Clicking on a submenu from the dropdown results in it loading within the same homepage container.

Current Setup

Currently, the homepage contains a navigation bar with menus that have dropdown submenus.

When a Menu link is clicked, it navigates to the corresponding page. This HTML also includes a similar navigation bar, but the active menu href does not have a dropdown; instead, it displays as a new div with nav-pills that trigger the aforementioned load() script upon clicking.

This setup enables the loading of submenu content in the same container if the menu link is shared and specific content needs to be displayed.

Desired Outcome

  1. Load external MENU.html or SUBMENU.html within the same container on the homepage while updating the URL simultaneously.
  2. Ensure that sharing the URL leads to opening the page with the specified content.
  3. When an active menu page is selected, update the navigation to show its submenus in the new div area without the dropdown functionality, maintaining responsiveness with collapsible options if needed.
  4. Enable reloading the same page with content post browser refresh.
  5. The ultimate goal is to achieve the following outcomes:

I welcome any feedback, suggestions, sample links, etc. Thank you in advance!

UPDATE: Although I couldn't personally get the code working, I came across a video on Single Page Applications that provides a relevant example of what I aim to achieve...

javascriptjqueryhtmlcssnavigation

Answer №1

It seems that something along these lines may be what you're looking for

$(function() {
  $("#submenu a").click(function(e) {
    e.preventDefault(); //To prevent the default anchor tag behavior
    $("#submenu a").removeClass("active")
    var url = this.href;
    var hash = new URL(url).hash;
    // localStorage.setItem("hash",hash)
    $(this).addClass("active");
    $(".container").load(url);
    location.hash = hash;
  });
  var hash = new URL(location.href).hash; // localStorage.get("hash");
  if (hash) { // if url / localStorage had a hash
    $("a[href='#" + hash + "']").click();
  }  
});
#submenu a { text-decoration:none}
#submenu a.active { text-decoration: underline}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="submenu">
  <a href="#page1">Page 1</a><br/>
  <a href="#page2">Page 2</a><br/>
  <a href="#page3">Page 3</a><br/>  
</div>  

<div id="container"><div>

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

Button in Laravel Vue JS staying enabled after redirection

I am facing an issue with a button on my webpage. Whenever the button is clicked, it should become disabled and have aria-disabled="true" added to it. However, upon page reload, the button does not remain disabled even though I pass a boolean true value to ...

javascriptphplaravelvue.jsvuejs2

Tips on preventing duplicate data from being extracted from an HTML source with HtmlAgilityPack

In my project, I am utilizing HtmlAgilityPack to scrape data from an HTML Code source. Let me show you an example of the HTML structure: <div class="enum-container"> <div class="enum"> <span class="field-key">MD5</span> ...

c#htmlvb.netextracthtml-agility-pack

Having trouble with submitting a Vue.js form when toggling the visibility of a bootstrap panel?

There are three bootstrap panels that are displayed depending on the selection made in the select element: <div class="panel panel-default"> <Select/> </div> <div class="panel panel-default" v-if="fileMode == 0"></div> <d ...

javascriptvue.jsbootstrap-4vuex

Guide on selecting a <a>class within a table using Selenium for calendar interactions

My current setup involves working with 'Selenium2(WebDriver)' in Eclipse using Java. I'm trying to figure out how to click on a specific date within a table (Calendar). The issue I am facing is that every time I change the month in the cal ...

javahtmlselenium

Tips for transferring values from one array to another array using JavaScript

I am attempting to incorporate values from the array below into another array [ {"criteriaName": "CRITERIA 1"}, {"criteriaType": "Dependent"}, {"table": "Table1"}, {"column": "Column1"}, {"joinType": "OR"}, {"o ...

javascriptvue.jsecmascript-6vuejs2

Refreshing the dropdownlist data from the database without the need to reload the entire page

I am searching for a way to refresh data in a dropdown list after clicking a button. It is crucial that only the dropdown list form reloads. // Controller View public ActionResult AddRelease() { var Authors = _context.Authors.ToList(); ...

c#jqueryjsonajaxmodel-view-controller

develop a real-time website availability tracker using Node.js

I am interested in developing an uptime monitor using NodeJS and MongoDB. The plan is to set up a cron job in NodeJS that will collect data and store it in MongoDB. Specifically, if the response status code of a website is not equal to 200, then that infor ...

javascriptnode.jsmongodbmongoose

Ways to display an icon with an underline effect upon hovering over text

I have implemented a CSS effect where hovering over text creates an underline that expands and contracts in size. However, I now want to display an icon alongside the text that appears and disappears along with the underline effect. When I try using displa ...

cssangular

Is there a way to sort data by year and month in mongodb?

I'm trying to filter data by year in MongoDB based on a specific year and month. For example, if I pass in the year 2022, I only want to see data from that year. However, when I try using the $gte and $lte tags, it returns empty results. Can someone g ...

javascriptnode.jsmongodbmongoosemongodb-query

Ensure that the execution of the function is completed before moving on to the next iteration within a $.each loop

While I'm not an expert in JS or jQuery, I'm currently working on coding a chat application that requires the following functionality: Retrieve conversation list through an AJAX call Display the conversations on the left side of the webpage aft ...

javascriptjquery

Measuring the space between HTML input elements

Can anyone help me with spacing out two input fields on my form? Here is what it looks like currently: https://i.sstatic.net/KRZ58.png. This is the code I am using: <form class="popup-form" id="login-popup-form"> <label>Your username/email:< ...

htmlcss

Is there a way to automatically update a number in HTML to increase by 1 each day?

I would like a feature that counts the number of accident-free days similar to the "This site has been accident-free for x days" concept. The count should increase automatically every day, and I am open to entering a starting number or specific date from ...

html

NODEjs encountered an error: The argument for "password" must be a string or one of the following data types: ArrayBuffer, Buffer, TypedArray, or DataView. It received an undefined value

Every time I run my app, I encounter this error in my terminal even though there is no password variable present in my code TypeError: The "password" argument must be of type string or an instance of ArrayBuffer, Buffer, TypedArray, or DataView. ...

javascriptnode.jstypescriptexpressnode-modules

Tips for transferring a text from asp.net code behind to local web storage

Is there a way to pass a string from C# code-behind to local storage using JavaScript? I attempted to pass the string through a HiddenField and Session cache, but was unsuccessful in retrieving the string in JavaScript to store it in local storage. I have ...

c#javascriptasp.netlocal-storagecode-behind

Does the angular scope binding using the &(ampersand) operator only bind once or repeatedly?

Is the angular scope binding &(ampersand) a one time binding? I see it referred to as a one-way binding, but is it also one-time? Let's say I have: <my-custom-directive data-item="item" /> And my directive is declared as follows: .direct ...

javascriptangularjsangularjs-scopeangular-directive

Error: accessing localStorage returns undefined value

I'm struggling with fetching values from localStorage. My goal is to save inputs and selections from a form and access them on a different page after hitting submit. Here is an example of the form structure : <form action="thank-you.html" role="fo ...

javascripthtmllocal-storage

Steps for storing div content (image) on server

Currently in the process of developing a web application that allows users to crop images. The goal is for users to have the ability to email the URL so others can view the cropped image, ensuring that the URL remains active indefinitely by storing every c ...

javascriptphphtml

Attempting to implement image switching with hover effects and clickable regions

Hey there, I'm currently working on a fun little project and could use some guidance on how to achieve a specific effect. The website in question is [redacted], and you can view the code I've used so far at [redacted]. You'll find a code blo ...

javascriptjqueryhtmlcsshover

Refresh the entire column in a jQuery data table

Is there a way to update all values in an entire column using the jQuery datatable plugin when a button is clicked? I have tried using fnUpdate, but it requires specifying row and column. Here is my HTML code for the table: <table id="regions" class= ...

jquerydatatablesjeditable

Remove elements from an array based on the indices provided in a separate array

1) Define the array a = [a,b,c,d,e,f,g,h,i,j]; using JavaScript. 2) Input an array 'b' containing 5 numbers using html tags. This will be referred to as the 'b' array. 3) Insert elements into array 'b' ensuring they are alwa ...

javascripthtmlarrayssplice