jQuery AJAX pagination how to prevent exponential looping?

Question

I'm trying to create an ajax pagination with jQuery. I am getting it to work but with a massive problem:

The pagination consists of <<-First <-Previous Page1 Page2 Next-> Last->> and each button works. The pagenum is sent through ajax and reloads the DIV the page sits in displaying posts relevant to that page number (Page 1 = posts 1-10, etc).

Lets assume we are on Page 1 of a total of 2 pages. Clicking on Page 2, Next, or Last brings me to page 2 as it should. If I then click Page 1, Previous or Last I am brought to page 1 as I should but the ajax is launched twice.

If I then again click Page 2, Next, or Last I am brought to page 2, again as I should but the ajax gets launched 4 times. If I return to Page 1, the ajax is launched 8 times.

You can see where I'm going with this.

I am including my code for 3 files:

index.php in which the content is displayed inside

<script type="text/javascript" src="fetchposts.js"></script>
<div id="contPaginated">
    <div id="content"></div>
</div>

fetchposts.js which loads getposts.php (seperates my content from wordpress stuff)

$(document).ready(function() {
     $('#content').load('getposts.php');
});

getposts.php which loads the posts as well as the pagination (this is where the problem is happening, only pagination code included since that is where the problem is)

<script type="text/javascript">
$(document).ready(function() {
var first = 1;
var currentPage = 1;
var numrows = <?php echo $rows; ?>;
var pagerows = <?php echo $page_rows; ?>;
var last = <?php echo $last; ?>;
var pagenum = '';
var hideLikes = <?php echo $hideLikes; ?>;
var hideDislikes = <?php echo $hideDislikes; ?>;

for (i = 1; i <= last; i++){
    $('<div id="page_' + i + '" class="pageNum"><a href="#">' + i + '</a></div>').appendTo('.pages');
}

$('.pageNum').live('click', function() {
    pagenum = $(this).attr('id').replace('page_', '');
    paginationAjax();
    return false;
});

$('.first').live('click', function() {
    pagenum = first;
    paginationAjax();
    return false;
});

$('.previous').live('click', function() {
    pagenum = Math.max(currentPage - 1, first);
    paginationAjax();
    return false;
});

$('.next').live('click', function() {
    pagenum = Math.min(currentPage + 1, last);
    paginationAjax();
    return false;
});

$('.last').live('click', function() {
    pagenum = last;
    paginationAjax();
    return false;
});

function paginationAjax(){
    // Send values to database
    $.ajax({
        url: 'getposts.php',
        //check.php receives the values sent to it and stores them in the database
        type: 'GET',
        data: 'pagenum=' + pagenum,
        success: function(callback) {
            $('#content').html('').html(callback);
        }
    });
}
});
</script>

<div class="Pagination">
<div class ="Pagination-inside-top">
    <div class="first">
        <a href=''> <<-First </a>
    </div>

    <div class="previous">  
        <a href=''> <-Previous</a>
    </div>

    <div class="pages"></div>

    <div class="next">
        <a href=''>Next -> </a>
    </div>

    <div class="last">
        <a href=''>Last ->></a>
    </div>
</div>
</div>

I want to make some things clear:

• I am aware the code needs cleaning. I just want to get this loop thing fixed first.
• The ajax itself works. It sends the proper values and retrieves them just fine.
• The variables all declare and set fine as well.

So again, the problem is that the ajax, while it functions fine and sends me to the right place, fires exponentially based on how many times I use the pagination: 1 click fires the ajax once but 2 clicks fires it twice, 3 clicks fires it 4 times, 4 clicks = 8 and so on.

So the question is: How do I stop the exponential loop?

Answer 1

Your live()s are the cause as far as i can see...

I would assign Back & Forward a unique id and set the current page on the php part of your script (assuming you are passing json headers and then json_encode(), it would be something like $array_of_vals_for_json['back_button']=$thispage-1; for previouse page link.

I think we would need to see what your php is doing to make any decent suggestions, but I am pretty sure your live is the cause of the looping