How to load whole page into a div when clicking a link?

Question

Please, some help would be truly appreciated.

I have read this question and I think i understood the answers

The thing is, I want the other page to be injected into the "main" div when a link is clicked. For example, when I click 2011, I want the page 2011.html to be injected into the "main" div.

    <div id="cssmenu" class="sixteen columns">
        <ul>
           <li><a href='#'><span>2011</span></a></li>
           <li><a href='#'><span>2012</span></a></li>
           <li><a href='#'><span>2013</span></a></li>
           <li><a href='#'><span>Edições Especiais</span></a></li>
           <li><a href='#'><span>Estat&iacute;sticas</span></a></li>
        </ul>
    </div>

    <div id="separator" class="sixteen columns">
    </div>
    <div class="sixteen columns" id="main" style="margin-top: 15px; margin-bottom: 15px">

    </div>

How can I do this?

Thanks in advance!

Did you try the accepted answer on the question you pointed? — Sergio, Aug 25 '13 at 09:00
Yes, @Sergio, but i can't figure out how to do this by demand, like when clicking a link. — Gabriel Sotero, Aug 25 '13 at 09:03
It's better to add a valid `href` attribute to the links. Search engines will be able to follow the links too. — Hashem Qolami, Aug 25 '13 at 09:10

Sergio · Accepted Answer · 2013-08-25T09:13:03.337

5

Try this:

$('li a').click(function (e) {
    e.preventDefault();
    var name = $(this).find('span').text();
    $("#main").load(name + ".html");
});

Demo here

This is a idea for 2011 - 2013 pages, but the ones with name wont work. You need to either give a id to the a element or a data- attr. The best would be to use the links href!

In case you use ID you can use this:

$('li a').click(function (e) {
    e.preventDefault();
    var name = this.id;
    $("#main").load(name + ".html");
});

And demo here

The best option:

Give the <a> element the correct href so it can be properly index by search engines. Like: <a href='2011.html'>. And then use this:

$('li a').click(function (e) {
    e.preventDefault();
    $("#main").load(this.href);
});

edited Aug 25 '13 at 09:13

answered Aug 25 '13 at 09:06

Sergio

28,539
11
85
132

Thanks for your help, Sergio. I think I'm going to use the last option. I haven't named the links yet just because it's the first stage of development. – Gabriel Sotero Aug 25 '13 at 09:16
@GabrielSotero, Happy I could help! boa continuação! – Sergio Aug 25 '13 at 09:16

score 0 · Answer 2 · answered Aug 25 '13 at 09:14

0

I know 2 options:

using ajax (asynchronous JavaScript and XML)
you can learn that here: http://www.w3schools.com/ajax/
prepend/append a iframe

answered Aug 25 '13 at 09:14

user2715127

1
2

How to load whole page into a div when clicking a link?

2 Answers2

The best option: