loading...

Reuse navbar & footer using jquery error

johnskiepogi profile image Johnskie-pogi ・1 min read

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.

Discussion

markdown guide
 

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

 

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😊