jQuery AJAX page loading, DIV specific

Question

Trying to bring in a specific DIV from a page called by the jQuery .load function.

This is the code i have:

<script type="text/javascript">
    $('ul.navigation li a').click(function() {
        $('#content-wrap').fadeOut(500);

            var targetPage = $(this).attr('href')

        setTimeout(function() {
            $('#content-wrap').load(targetPage, function() {
                $('#content-wrap').fadeIn(500);
            });
        });     
    return false;
    });

</script>

...and it works - but it calls the whole page, rather than a specific area...

Cheers!

Since this is a jQuery question rather than a WordPress question, I think it is better suited for StackOverflow and should be migrated. Agree/disagree? — EAMann
– EAMann, Commented Mar 28, 2011 at 15:26

EAMann · Accepted Answer · 2011-03-28 15:32:10Z

4

You're trying to load a page fragment rather than the whole page. If you dig deeper into the documentation, you'll see you need to change your targetPage variable just slightly.

var targetPage = $(this).attr('href');
targetPage += " #content-wrap";

This will change the targetPage variable to something along the lines of http://site.url #content-wrap and will fetch the contents of the #content-wrap element rather than the whole page.

See the Loading Page Fragments section of the .load() documentation for more.

answered Mar 28, 2011 at 15:32

EAMann

4,1462 gold badges31 silver badges49 bronze badges

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

1 Comment

Infocentre Over a year ago

I see! I am just starting to get my head around jQuery - it seems i was looking at the wrong part to fix! Thank you : )

Collectives™ on Stack Overflow

jQuery AJAX page loading, DIV specific

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related