DEV Community

Johnskie-pogi
Johnskie-pogi

Posted on

2 1

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.💕

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more