CODEWITHSUNDEEP
jqueryajax
user288423
user288423

Reputation: 201

loading page framents with Jquery AJAX

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?

Upvotes: 20

Views: 14143

Answers (4)

Po Po
Po Po

Reputation: 233

The correct answer for you is:

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

Upvotes: 1

Jordan Reiter
Jordan Reiter

Reputation: 21022

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');

However, note that the special syntax (' #selector') means that scripts present in the loaded HTML will not be executed. See Script Execution in the .load() docs.

Upvotes: 36

user1175087
user1175087

Reputation: 24

The easy solution with the load method:

$("#menu a").click(function(){
    event.preventDefault();
    $("#container").load(this.href + " #container p");
    return false;
});

Only use the Ajax method for more complex scripts such as posting or getting from a PHP script or JSON file otherwise it will slow down your website.

Upvotes: -2

David Robbins
David Robbins

Reputation: 10046

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);

    })

});

Upvotes: 3

Related Questions