Question

Im trying to use $.get to load pages without reloading the page.

<script>
$('#top_links a').click(function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').empty();


    $.get(link, { }, 
        function(data) {
            $('#content').empty().append(data);
        }
    )
});
</script>

This works but the entire requested page is getting stuffed into #content. Instead of detecting the ajax request and filtering the data on the server-side, I would like to do it client-side. Is there a way to use javascript to effectively filter the string so that I only get certain divs? The content that I want to preserve will all be contained inside of a div called #content ( Im just trying to swap the current page’s #content with the requested page’s #content).

Answer 1

Try load method with loading of page fragments approach:

$("#content").load(link + " #content > *");​​​​​​​​​​​

Here we can use > * in order to include the inner HTML of the #content block only without surrounding it with <div id="content"></div> (check more information about it here).