jQuery AJAX page loading, DIV specific

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 = $(t开发者_Go百科his).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!

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.