using the $.ajax function to fetch a specific id

I'm learning how to use jQuery methods of making AJAX calls, at the moment what I would like to know is how I use the $.ajax function to return a certain elements content. I realize this can be done easily enough using .load() but would like to get the results using .ajax(). At the moment I am fetching the clicked href attribute and returning the whole pages data when I would like to just return the #container content of the page?

Sample code being used:

jQuery(document).ready(function() {
    /* Ajax load in portfolio pages */
    var ajaxLoader = $('#ajax-loader');
    var folioContainer = $('#folio-container');

    ajaxLoader.hide();

    $('div.wp-pagenavi a', 'div#content').click(function(e) {

        $.ajax({
            url : this.href,
            method : 'get',
            success : function(data){
                folioContainer.html(data);
            }
        });

        e.preventDefault();

    });

});

Answers


You should be able to .filter() the response from the server to select only the data you want:

        success : function(data){
            folioContainer.html($(data).filter('#container'));
        }

Here's a jsfiddle of this solution: http://jsfiddle.net/jasper/5HSzB/

Here's an optimized version of your code:

jQuery(function($) {
    /* Ajax load in portfolio pages */
    var ajaxLoader = $('#ajax-loader').hide();

    $('.wp-pagenavi', '#content').find('a').click(function(e) {       

        $.ajax({
            url     : this.href,
            method  : 'get',
            success : function(data){
                $('#folio-container').html($(data).filter('#container'));
            }
        });

        e.preventDefault();

    });

});

You may be better off using the load method http://api.jquery.com/load/ , read the section "Loading Page Fragments"

not sure but try:

jQuery(document).ready(function() {
    /* Ajax load in portfolio pages */
    $('#ajax-loader').hide();

    $('div.wp-pagenavi a', 'div#content').click(function(e) {
        $.load(this.href + ' #folio-container');
        e.preventDefault();
    });
});

Need Your Help

Best way to create fragments

android android-fragments

I have some fragments with a gridview, gridview contents are decided from a where in the db, througth a cursor loader.

How can I make an external toolbox available to a MATLAB Parallel Computing Toolbox job?

parallel-processing external matlab

As a continuation of this question and the subsequent answer, does anyone know how to have a job created using the Parallel Computing Toolbox (using createJob and createTask) access external toolbo...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.