Replace div content using jQuery

Question

I have this code in header.html:

<nav role="navigation">
    <ul class="nav">
        <li><a id="home" href="index.html" class="current">home</a></li>
        <li><a id="about" href="includes/test.html">about</a></li>
        <li><a id="resources" href="#">resources</a></li>
        <li><a id="archive" href="#">archives</a></li>
    </ul>
 </nav>

Now, everything seems fine until my index.html loads files from another folder to fill the divs with id="header", id="content" and id="footer" using:

$(function() {
    $("#mainhead").load("templates/header.html");
    $("#content").load("templates/content.html");
    $("#footer").load("templates/footer.html");
});

My question is - How can I replace content in the div id="content" with the one from another HTML page that can be accessed by clicking a link in the nav menu?

Do you have to contents that you want to put into the div as a string? — Nicholas Robinson
– Nicholas Robinson, Commented Sep 9, 2015 at 12:19
Is $('nav a').click(function() { $('#content').load(this.href) }); what you mean? — haim770
– haim770, Commented Sep 9, 2015 at 12:22
my guess is you would put load calls similar to this in a click handler, and attach that to the click event of the menu item? — Timothy Groote
– Timothy Groote, Commented Sep 9, 2015 at 12:22

Reinstate Monica Cellio · Accepted Answer · 2015-09-09 12:24:28Z

3

Change the code that loads the navigation to this...

$("#mainhead").load("templates/header.html", function() {
    $(this).find(".nav a").on("click", function(e) {
        e.preventDefault();             // stop the link from firing as normal
        $("#content").load(this.href);  // load the file specified by the link
    });
});

This will "ajaxify" the links in the header navigation, after it has loaded, so that the content div is loaded for each of the links, without having to navigate away from the page. Just make sure each header link has the correct href value for the content you want it to load.

answered Sep 9, 2015 at 12:24

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alin-Mihai Bobeica Over a year ago

Thank you very much, worked like charm, it's been two days since I was looking for a solution, but nothing seemed to work, thank you very much again

Reinstate Monica Cellio Over a year ago

No problem - glad I could help :)

Vivek Jain · Accepted Answer · 2015-09-09 12:51:31Z

0

Is this what you meant? This will load the content from header/content/footer pages and load in the appropriate div on click of home.

$("#home").click(function () {
    $("#mainhead").load("templates/header.html", function (data) { $(this).html(data); });
    $("#content").load("templates/content.html", function (data) { $(this).html(data); });
    $("#footer").load("templates/footer.html", function (data) { $(this).html(data); });
});

edited Sep 9, 2015 at 12:51

Vivek Jain

3,8856 gold badges33 silver badges47 bronze badges

answered Sep 9, 2015 at 12:35

Aniket Betkikar

1661 silver badge14 bronze badges

1 Comment

Alin-Mihai Bobeica Over a year ago

already done that, the problem was when i wanted to change to another page (like "about", "resources", etc) to not redirect me to that page, but to replace the actual content in the #content div with the one from the "about" page.

score 0 · Accepted Answer · 2015-09-09 12:54:20Z

0

$("#content").replace("old page","new page");

try this one.

or

$("#content").load(){ location.replace("your page"); }

or

var url = "Your url"; $(location).attr('href',url);

edited Sep 9, 2015 at 12:54

answered Sep 9, 2015 at 12:34

user4961104

1 Comment

Alin-Mihai Bobeica Over a year ago

tried this one too, didn't help much either, thank your for the answer though :D

Bhushan Kawadkar · Accepted Answer · 2015-09-09 12:57:25Z

-2

$("#div").html("Your content");

edited Sep 9, 2015 at 12:57

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

answered Sep 9, 2015 at 12:22

Jayanti Lal

1,1836 silver badges19 bronze badges

Collectives™ on Stack Overflow

Replace div content using jQuery

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related