loading page framents with Jquery AJAX

Question

I would like to use $.ajax() to request a page, but load only fragments of that page. I know you can specify what page fragments you want with .load() but I was wondering if this is possible with $.ajax?

Answer 1

You could get your fragment via post, append the html to a div with display: none; Then use the selector to get the fragment that you want and append it to the region that you wish to display.

Air Code:

<div id="tempRegion" style="display:none;">

</div>

$.ajax({
    url: "page.htm",
    type: "GET",
    success: function(results){

        $('#tempRegion').html(results);

        ...

        //  Now select fragment, append to display area
        var fragement = $('#someFragment').html();

        $('#displayRegion').html(fragement);

    })

});

Answer 2

For those of you who are wondering, stoplion is referring to this feature: Loading Page Fragments (scroll down on the page):

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

Since $.get() doesn't appear to support it, I assume that $.ajax wouldn't either. A simple way to implement this would be the following:

$.ajax({
   url: 'http://example.com/page.html',
   data: {}
   success: function (data) {
      $("#el").html($(data).find("#selector"));
   },
   dataType: 'html'
});

This would be the equivalent of

$("#el").load('http://example.com/page.html #selector');