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?

score 1 · Accepted Answer · answered Jan 08 '12 at 21:01

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

answered Jan 08 '12 at 21:01

Umut

66
6

The php is irrelevant: it is just a mysql query and some variables. The problem absolutely is in the javascript and only the javascript. That ebing said, it would seem that the live() is indeed the cause, but what can I do to substitute it? – Sweepster Jan 08 '12 at 21:43
As PetersenDidIt Suggested, move the live()'s to the 'parent' page as they will pickup on new elements generated by the rest of your script from there. – Umut Jan 08 '12 at 21:59
ah cool! The way your script works, (if you haven't changed it) the on() is still being called everytime a user clicksthe next/prev page. Not sure but maybe you should look for a way around that? – Umut Jan 08 '12 at 22:01
It is being called, but it isn't looping like live() was doing. It has to be called because I want the buttons to always work when clicked. The script with live() would load getposts.php exponentially because live() remembers for every instance now and in the future while on() only works for the now, hence no looping. – Sweepster Jan 08 '12 at 23:07

score 0 · Answer 2 · answered Jan 08 '12 at 20:59

0

You are loading getposts.php multiple times, which results in the live events being bound each time you load getposts.php.

On page load fetchposts.js loads getposts.php and binds the live click events. Then you click on a link and it loads getposts.php again and binds the live click events again. and loop.

Move your js code in to fetchposts.js and you should be good.

answered Jan 08 '12 at 20:59

PetersenDidIt

25,562
3
67
72

I can't do that though. The pagination has to refresh alongside the getposts. Reason being that the users can hide posts with given values. When they are hidden, getposts.php is reloaded returning a different set of posts, meaning the pagination must refresh alongside it to display the proper number of pages. Any ideas? I don't want to have my pagination sit in a different file for that reason. Doing so requires me to create an identical mysql query just so the pagination can catch the variables which is a waste of resources when those same variables and queries are in getposts.php... – Sweepster Jan 08 '12 at 21:42
Just move the events in to the `fetchposts.js` file then. Because they are `live` events they will handle the html changing after a page load. – PetersenDidIt Jan 08 '12 at 21:49
I replaced live() with on() and it seems to have fixed the problem. – Sweepster Jan 08 '12 at 21:50

jQuery AJAX pagination how to prevent exponential looping?

2 Answers2