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

Retrieve data from external URL using API

I am encountering a captchas page when attempting to retrieve JSON data from a URL through my API. Even though I am trying to access an array of JSON data containing openPrice, highPrice, price, and lowPrice, all I seem to get is a captcha form instead of ...

javascriptarraysnode.jsjsonexpress

How can I display a popup window when a validation event occurs?

Having trouble finding a suitable solution for my problem. Our MVC 3 application includes a form with Data Annotations for validation. The Email field has a RemoteAttribute to check for uniqueness. Here's what needs to be implemented: If the Email ...

jqueryajaxasp.net-mvc-3validationdata-annotations

Passing a JavaScript Object to an ASP.NET Handler

How can I send a JavaScript object to an ASP.NET Handler and extract its values? I have defined a complex type object as follows: function AccountObjCreate() { var AccountsView = {}; AccountsView.Username = null; AccountsView.Email = null; AccountsView.P ...

c#javascriptasp.netjsonhttphandler

Adding External JS Files to a Node.js Project

I recently discovered how to incorporate a JS file into Node JS. However, I am facing an issue with two JS files in particular - hashing.js and encoding.js. Within encoding.js, I have the following code: exports = exports || {}; exports.encoding = encodi ...

javascriptnode.js

Surprise mistake: Jade's error with the length

What can I do to address this problem? The jade file in question is as follows: extends layout block content h1. User List ul each user, i in userlist li a(href="mailto:#{user.email}")= user.username U ...

javascriptnode.jsexpresspug

Is it better to use a page with a Repeater or make an AJAX call to generate a dynamic

As I transition from traditional ASP.NET programming to AJAX/jQuery, I find myself working with a web form that utilizes a Repeater server control to display data in an HTML table. I perform sorting, coloring, and other client-side actions on the table. I ...

jqueryasp.netajax

Utilize array.prototype.reduce() with strings

I'm puzzled about how the reduce operation is carried out on a string. Initially, a new Str instance is created with the desired string as a parameter. Following that, the split method is used to divide the string into an array of strings. A method c ...

javascriptarraysreduce

What are some effective ways to integrate jquery, ajax, and mysql technology in combination?

I'm encountering an issue while trying to integrate jQuery and AJAX into my code. I attempted to do so but was unsuccessful. Below is my jQuery code: $(document).ready(function () { $('#btnGOlustur_Click').click(function () { v ...

c#jquerymysqlajax

Modify the values of all cells within a specific column in a table by utilizing a 2D array for both rows and cells

https://codesandbox.io/s/1p770371j The demonstration above showcases a table where data can be modified in each cell, and the 2D array keeps track of which row and column the data changes occur. A new button has been added to the column header titles. Th ...

javascriptarraysreactjsmaterial-ui

Enhance a Javascript object by dynamically introducing new elements

I am currently working on a webpage using HTML and jQuery. My goal is to create a form where users can enter an email address in a textbox, and when they click a button, the email should be added to an object that displays all the emails entered so far. Th ...

javascriptjqueryhtmlobject

PHP - Struggling to insert data in the appropriate time format

Currently working on a scheduling program and looking to utilize Ajax for inserting hours into my database. When hardcoding the insertion, everything works perfectly fine. However, when using an array, it seems like json is altering the data - causing the ...

phpjquerymysqlajaxjson

Transforming a React, Redux, and MUI Menu into an Electron Application

I'm in the process of transforming a web-based React + Redux + MUI application into an Electron app. The original app features a main AppBar with multiple dropdown menus, each containing menu items that interact with the app's Redux store. While ...

javascriptreactjsmaterial-uielectron

What causes the variance in the node_modules directory between a project being installed locally versus globally?

Imagine I have a project called X, which depends on another package, Y. Y in turn has its own dependency on Z. When I run npm install Y in my project, the structure of my node_modules folder is as follows. Take note that Z is installed as a direct depend ...

javascriptnode.jsnpmnode-modules

HTML5 Canvas Border

Hey Everyone, I've been working on an HTML5 canvas project where I set the canvas width to $(window).width(). Everything was going smoothly until I added a border, which caused a horizontal scroll to appear. Important: I attempted to use the innerWid ...

javascriptjqueryhtmlcsscanvas

Steps for generating a unique division element for every javascript response

How can I dynamically create a new div for each response in JavaScript? The message is in JSON format containing all the messages sent and received. This is my JavaScript code: $.get("MessageServlet", function (responseJson) { $.each(responseJ ...

javascriptjqueryhtml

Ways to calculate the product of two numbers using AngularJS within an HTML document

I am currently experimenting with AngularJS to create a unit conversion tool. I have set up two dropdown menus with unit values and would like to calculate the product of the selected values from the dropdowns. I have created a jsfiddle with my code, and I ...

javascripthtmlangularjs

Unusual sequence of JQuery Ajax calls

Within my website, there is a project div that is displayed using EJS. The data for the projects in EJS are rendered using a forEach loop, resulting in multiple similar divs appearing on the page. Each project div is assigned an id for identification pur ...

javascripthtmljquerydom

VueJS method for making an HTTP GET request

Attempting to make an http get request using Vue js. I can't seem to find any issues with the logic, although I'm not very experienced with vuejs. Continuously encountering these two errors: [Vue warn]: Error in mounted hook: "TypeError: Cann ...

javascripthttpvue.js

Uploading files with Ajax in PHP

Illustration of my Ajax script: Script <script type="text/javascript> $(document).ready(function(){ $('.costExcel').on("submit",function(event){ event.preventDefault() var url = "ajax.php"; ...

javascriptphpjqueryajaxtwitter-bootstrap

Adjust the language code in a URL using JavaScript or Node.js

Within my common header file, there is a navbar that includes a multilanguage dropdown menu. The issue I am facing is that when I select a language from the dropdown, the page translates correctly. However, when I navigate to other pages, the selected lang ...

javascriptjqueryhtmlnode.jsexpress