On link click load html page in container

Question

Jquery novice here with a quick question. I have two empty containers in the html:
<aside></aside>
<section></section>

Then I load content into it:

$('aside').load('timeline.html #dates');
$('section').load('timeline.html #intro');

#dates contains links that, when clicked on, should replace and load its url content into <section> without reloading the whole page. I tried making a click handler but it's not working (on click still leaves current page and goes to url):

$('a').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    var url = $(this).attr("href");
    $('section').empty().load(url);  
});

I even tried this variation to no avail:

$('aside a').on('click', function() {
    var url = $(this).attr("href");
    $('section').empty().load(url);
    return false;
});

I could use iframes, but I don't want to since I'm learning about .load(). Any suggestions?

Barrie Reader · Answer 1 · 2013-08-15T08:29:59.770

1

Perhaps use ajax rather than load?

JSFIDDLE: http://jsfiddle.net/neuroflux/yHVMA/

$('aside a').on('click', function() {
    var url = $(this).attr("href");
    $.ajax({
        url: url,
        type: 'jsonp', //for x-domain
        success: function(data) {
            console.log(data);
            $("section").html(data);
        },
        error: function(err) {
            alert("bugger!\r\n" + data);
        }
    });
    return false;
});

edited Aug 15 '13 at 08:29

answered Aug 15 '13 at 08:24

Barrie Reader

10,647
11
71
139

I guess I prefer `ajax` because of the `success` and `error` events – Barrie Reader Aug 15 '13 at 08:33
http://stackoverflow.com/questions/753300/how-to-catch-error-in-jquerys-load-method – karaxuna Aug 15 '13 at 08:40
Works fine in jsfiddle but it's still not loading in `
`. It's live now in my project if you want to see: [link](http://www.nevblog.com/nevblog-timeline/)
– matenji Aug 15 '13 at 08:41

score 1 · Answer 2 · answered Aug 15 '13 at 08:28

1

Try this:

$(document).on('click', 'aside a', function(e) {
    e.preventDefault();
    var url = $(this).attr("href");
    $('section').empty().load(url);
});

In your case event may not be attached to anchor if the anchor is loaded dynamically

answered Aug 15 '13 at 08:28

karaxuna

26,752
13
82
117

Hey Karaxuna, I tried this earlier but it causes the page to freeze. Why does it do that (when I put `'click', 'aside a'`)? – matenji Aug 15 '13 at 08:43
Here's a live example: [link](http://www.nevblog.com/nevblog-timeline/index2.html) – matenji Aug 15 '13 at 08:49
@matenji because you have 242 `section` tags on page :)) and `$('section').empty().load(url);` will of course cause it. `$('section')` selects all 242 tags – karaxuna Aug 15 '13 at 09:03
Thank you! I did deeper css targeting which helped. – matenji Aug 15 '13 at 17:06

sba · Answer 3 · 2013-08-15T09:22:56.473

You're registering the click() handlers before the content is loaded. You'll have to do this after the content is loaded, from the complete handler of load():

function click_handler() {
    $(this).load($(this).attr("href"), {}, add_handlers)
    return false;
}

function add_handlers() {
    $(this).find('a').click(click_handler)
}

$('#box').load('/whatever/', {}, add_handlers)

Note how add_handlers() is run everytime after loading new content. See an example that reloads the same link when you click on it.

score 1 · Answer 4 · answered Aug 15 '13 at 09:22

You have to specify the id for the section where you want the page to load and load into that section tag.Since there are a lot of section in your page

<section id="sec"></section>

then the code

 $(document).ready(function(){
     $('a').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
         var url = $(this).attr("href");
       $('#sec').empty().load(url);  
    });
    });

matenji · Accepted Answer · 2013-08-15T17:16:27.123

Thanks to Karaxuna, Neuro, Sarath and others, here's the code that I got working. .load() retains CSS from the loaded page which caused conflicts, so on link click I just hid section and loaded the new page in an iframe instead (no css conflicts). And to make sure I'm only targeting certain elements I'm using the > selector so as not to target duplicate tags when .load() is in the picture.

<aside>
</aside>

<section>
</section>
<iframe class="no-display">
</iframe>   

<script>
 $(document).ready(function() {
    $('aside').load('timeline.html #dates');
    $('body > section').load('timeline.html #intro');
    $(document).on('click', 'aside a', function(e) {
        e.preventDefault();
        $('body > section').hide();
        $('iframe').removeClass('no-display');
        var url = $(this).attr('href');
        $('iframe').attr('src', (url));
    });
 });    
</script>

On link click load html page in container

5 Answers5