Question

I’m trying to set up a relatively simple AJAX pagination with jQuery like this:

$('.pagination a').on('click', function(e) {
        e.preventDefault();

        $.ajax({
            type    : 'GET',
            url     : $('.pagination a').attr('href'),
            success : function(html) {
                // Get older pager
                var oldPager = $(html).find('.pagination a'); // Not working
            }
        });
});

For some reason I can’t get the next page’s pagination link even though it does exists, if I console.log($(html)) I do get all the existing elements including the .pagination div with the a tag, not sure with the find method returns nothing. I’ve done it like this in the past and I don’t remember having this much trouble.

Here’s the html string to help with debugging: http://pastebin.com/dD8GnG78 it’s basically the next page’s html. I also tried to console.log($(html).find('div')) just for testing and noticed that not all divs are getting returned for some reason.

Thanks in advance!

Answer 1

Without knowing what you are actually trying to do, I think the issue lies with your jQuery selectors:

url : $('.pagination a').attr('href')

Should be:

url : $(e.target).attr('href')

And, what is your variable “oldPager” meant to contain? The way you have it now, it will contain ALL the pagination anchors from the HTML you just requested with the AJAX call.

EDIT:

Ok, try this:

var oldPager = $(html).filter('.pagination').find('a');