jQuery Ajax load fragment of url were the fragment is defined by a variable

Question

relatively new jQuery user(used it in the pass but really trying to understand it now).

Am trying to create my own jQuery pagination with ajax, so far my code looks like so:

$(document).ready(function(){
    $('.pigs ul.pigspagination li a').live('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if(url.match('^http')){
            return true;
        } else {
            var element = $(this).closest(".pigs");
            $(element).append('<div id="loading"><img alt="Loading..." src="loading.gif" /></div>');
            $('#loading').fadeIn('normal');
            $(element).load(url + ' ' + element);
            return false;
        }
    });
});

The code basically says on click of ".pigs ul.pigspagination li a" load the parent element which is ".pigs" from the the given url then load the same fragment from the url. However this does not seem to be working:

$(element).load(url + ' ' + element);

I assume that am loading the url then am adding a space then saying for the element which is referenced from var element = $(this).closest(".pigs");

if your wondering why i just cant put $(element).load(url + ' .pigs');

It is because i reference .pigs multiple times and its automatic since it the php gallery script i wrote.

The html looks roughly like this:

<div class="pigs">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="pagination link">&lt; Prev</a></li>
        ...
        <li><a href="pagination link">Next &gt;</a></li>
    </ul>
</div>

times however many more galleries are loaded.

Any ideas?

--------------EDIT for bfavaretto-------------- Tried this

var frag = $(this).closest(".pigs").attr('id');
$(element).load(url + ' #' + frag);

it loads just that suction but removes all the code, my guess is frag is being passed badly. the .attr('id'); will get the id by its self, not the '#' right?

Finale code if anyone is interested:

$(document).ready(function(){
    $('.pigs ul.pigspagination li a').live('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if(url.match('^http')){
            return true;
        } else {
            var element = $(this).closest(".pigs");
            $(element).append('<div id="loading"><img alt="Loading..." src="loading.gif" /></div>');
            $('#loading').fadeIn('normal');
            var frag = $(this).closest(".pigs").attr('id');
            $(element).load(url + ' #' + frag);
            return false;
        }
    });
});

Answer 1

After what we dicussed on the comments, I think I understand what you want.

Your example URL index.php?pigsgallery=1&pigspage=1 looks good. I assume it will only return the contents of pigsgallery X, on page Y. Perfect.

So your problem seems to be inserting the contents returned by the URL into the right gallery div-- the one which contains the pagination link clicked. You are almost there. As I suggested on one of the comments, $(element).load(url) should word. It means "load the url, and replace the contents of $(element) with the response".

Your HTML should look like the following (with both galleries currently on page 2):

<div class="pigs" id="pigs1">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="index.php?pigsgallery=1&pigspage=1">&lt; Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=1&pigspage=3">Next &gt;</a></li>
    </ul>
</div>

<div class="pigs" id="pigs2">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="index.php?pigsgallery=2&pigspage=1">&lt; Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=2&pigspage=3">Next &gt;</a></li>
    </ul>
</div>

If this is not how your HTML looks like, you may be confusing what should be done in PHP and what requires jQuery. PHP should handle the request and return just the content you need to replace on one of the divs. Then jQuery should be used to actually insert that content into the page, inside the right element (which you already have with var element = $(this).closest(".pigs").