DEV Community

Johnskie-pogi
Johnskie-pogi

Posted on

Reuse navbar & footer using jquery error

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)

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan • 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

Collapse
 
johnskiepogi profile image
Johnskie-pogi

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😊

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

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

Thread Thread
 
johnskiepogi profile image
Johnskie-pogi

Many many thank you brother.💕