Refreshing a specific div within an HTML page

I am facing an issue with the navigation on my website. Currently, I have a div on the left side of the page containing a nav bar. However, when a user clicks a link in the nav bar, only the content on the right side of the page changes. Is there a way to ensure that only the right side content is reloaded when a link is clicked? For example, if a link in "navPanel" is clicked, then "contentPanel" should refresh to display the corresponding content.

<nav id="navPanel">
   <a>link 1</a>
   <a>link 2</a>
   <a>link 3</a>
</nav>

<div id="contentPanel">
   <p>Content</p>
</div>
javascriptjqueryhtmlcss

Answer №1

A great way to dynamically load content on a webpage is by using the jQuery function called load(). 

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script>
$( function() {
    $(document).on("click", "#navPanel a", function(){
        var link = $(this).attr('rel');  
        $("#contentPanel").load(link+" #contentPanel > *");
    });
});
</script>

<nav id="navPanel">
   <a rel='link.html'>link 1</a>
   <a rel='link.html'>link 2</a>
   <a rel='link.html'>link 3</a>
</nav>

<div id="contentPanel">
   <p>Content</p>
</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

Maintain the selected list item after filtering in AngularJS

I am facing an issue with highlighting selected items in a list. I have three first names: Roy, Sam, David displayed in a ul as list items. Initially, I can toggle each li on click just fine. However, after performing a search and returning to the list, th ...

jquerycssangularjs

How to choose a particular Excel spreadsheet in Angular before importing the file?

I am currently working on a new feature that allows users to choose a specific Excel worksheet from a dropdown list before importing a file. However, I am facing some difficulty in adding the worksheet names to the dropdown list. Right now, I have placehol ...

htmlangularexceltypescriptfrontend

Replicating form fields using jQuery

I have come across many questions similar to mine, but unfortunately none of them address the specific details I am looking for. On a single page, I have multiple forms all structured in the same way: <form> <div class="form-group"> ...

javascriptjqueryforms

A guide to entering information into an input field with JavaScript for logging in successfully

https://i.stack.imgur.com/TF51Z.gif https://i.stack.imgur.com/HHsax.png https://i.stack.imgur.com/HUztt.png When attempting to input text using document.getelement('').value="" , it doesn't behave as expected. The text disappear ...

javascripthtmljquerycssajax

Embed a Vaadin component within an element dynamically generated by a Javascript component

I am currently designing a Vaadin application and working on a custom Javascript component, which is a subclass of AbstractJavascriptComponent. This component uses jQuery to generate a table-like structure. In certain scenarios, users should be able to in ...

javascriptjavavaadin

Sliding Toggle: Panel Revealed with Button Slide

Currently, I am working on implementing a jquery slide tab feature. The functionality is working fine on button click. However, I want the button to stick with the panel and slide along with it. At the moment, the button remains fixed while the panel slide ...

javascriptjqueryhtmlcss

Creating PDFs in iOS and Android using Ionic framework

Seeking assistance with resolving this issue. I have researched extensively on Google, jspdf, pdfmake.org, inappbrowser plugins, but have been unsuccessful in getting my Ionic project to function properly. The goal is to create a simple form that includes ...

javascriptangularjsionic-framework

Having trouble with jQuery on my webpage

Looking for assistance with a technical issue I'm facing... I am currently working with AngularJS and have integrated jQuery into my project. However, I've encountered an issue where the jQuery code is not functioning as expected on the HTML pag ...

javascriptjqueryhtmlangularjs

I can't figure out why I keep getting the error message saying that $ is not

Looking to execute a PHP file using AJAX, I attempted the following: <html> <script type="text/javascript"> setInterval(function(){ test(); },3000); function test(){ $.ajax({ type: "POST", url: "GetMachineDetail.php", data: ...

javascriptphpjqueryajaxcall

Node js does not support iteration for DirectoryFiles

I am currently working on a program aimed at mapping all the json files within a specific directory. As I am new to JavaScript, this inquiry may not be ideal or obvious. Here is my code: const fs = require('fs'); const { glob } = require('gl ...

javascriptnode.jsjson

The removal function in jQuery does not function as expected

I have a form where users can dynamically add fields to input information that will be inserted into a database. I'm able to add rows and insert data successfully, but I'm facing an issue with removing unwanted rows. When using the jQuery remove( ...

jqueryforms

What's the best way to include CSS and Javascript in an HTML document?

I'm still getting the hang of CSS and JavaScript. I stumbled upon a cool countdown timer that I'd like to incorporate into my website, but I'm not quite sure how to place it where I envision it. Check out the timer here CSS: html,body{mar ...

javascripthtmlcss

Saving the Chosen Option from Button Group into react-hook-form State

Struggling to save the chosen value from MUI Button Group into react-hook-form's state, but encountering challenges with the update not happening correctly. view codesandbox example Below is a simplified version of my code: import { ButtonGroup, But ...

javascriptreactjsmaterial-uijsxreact-hook-form

How can you make the contents of a <DIV> expand?

Picture a scenario where I have a navigation bar in the header of my web page, consisting of several links. What I want is for these links to expand horizontally to fill the parent container without me having to hard-code based on the number of links. In o ...

htmlcss

Having trouble getting CSS3 Keyframes to function properly?

Check out the following code snippet: .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } ...

javascriptjquerycssanimationcss-animations

The element type provided is not valid: it was expecting a string but received undefined. Please review the render method of AnimatedComponent in ReactNavigation

I've been facing an issue for the past few days with ReactNavigation v6+. While there are multiple questions and answers about the invalid element type, none of them seem to be working with this specific example: The problem arose after integrating t ...

javascriptreactjsreact-nativereact-navigationreact-navigation-v6

JavaScript class syntax allows for the definition of inherited instance fields

In the code snippet below, I have implemented a way to define a prototype with a simple property that can be inherited by objects using the prototype: const SCXMLState = Object.setPrototypeOf( Object.defineProperties({ addChild() { } isStat ...

javascriptes6-class

The pictures in a <div> tag are not showing up

Functionality: I have set up 2 different <div> elements with unique IDs. Each of these <div> elements will make an ajax call to fetch a specific set of images for display. To summarize, both <div> elements are invoking the same ajax met ...

javascriptjqueryhtmlcssajax

Choose the first element of its type and disregard any elements nested within it

I need to change the color of only the first p element within a specific div. Using :first-child would work in a simple example, but in my project, there are multiple elements and more could be added in the future. I want to avoid using :first-child alto ...

htmlcss

React Material Table - issue with data filtering accuracy

Currently in my React project, I am utilizing Material Table. While everything appears to be rendering correctly, the filtering and searching functionalities are not working as expected. To provide more context, below is a sample of the code: ht ...

javascriptreactjsmaterial-uimaterial-designmaterial-table