Reuse navbar & footer using jquery error

#help #html #javascript #jquery

I was trying to reuse Navbar to all html page, so i try this code:

$(function(){
$('header').load('navbar.html');
});

And it was a success!

So i try to add navbar and footer at the same page then i try this:

$(function(){
$('header').load('navbar.html');
$('footer').load('footer.html');
});

But the only thing i see is the footer.

Can you help me to solve this?

I was trying to create my first project.

Top comments (4)

Yogesh Chavan • Jul 14 '20 • Edited

You need to have separate header and footer tags in you html like this

<body>
    <header></header>
    <p>This is some main content</p>
    <footer></footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
 </body>

and then for example in script.js you can add the below code

$(function(){
 $('header').load('navbar.html');
 $('footer').load('footer.html');
});

which will give you the result which you're expecting

Johnskie-pogi • Jul 14 '20

Hi fella!

I already did your recomendation but the result is still the same, but i still try again your recommendation but the result is still the same.

Im still a newbie😔

I appreciate your recommendation😊

Yogesh Chavan • Jul 14 '20

I have created the code here. Check this out codesandbox.io/s/header-footer-jqu...

Johnskie-pogi • Jul 14 '20

Many many thank you brother.💕

DEV Community

Reuse navbar & footer using jquery error

Top comments (4)

Read next

TIL: Block tabs and Get IP in Javascript

How to Unsave All Saved Posts on Facebook in a Few Simple Steps

Guide to Building a REST API with Deno and Oak Framework

Effective Logging and Monitoring for Node.js Applications