Create a gist now

Instantly share code, notes, and snippets.

/*
ajaxPaginate (will_paginate via jQuery)
@author Al Shaw for TPM PollTracker (http://polltracker.talkingpointsmemo.com) <al@talkingpointsmemo.com>
December 2009
USAGE!
Stick this in your page somewhere, with the div you want to inject the new content into as the argument.
Here, the injected_div is `.index_polls`. For it to work, you need to have a raw version of your content to inject.
The raw version should take the format <page>?format=list_only&page=[pagenumber].
<script type="text/javascript">
$(document).ready(function() {
$(this).ajaxPaginate('.index_polls');
});
</script>
*/
jQuery.fn.ajaxPaginate = function(injected_div,no_reverse) {
var next = $(".pagination a.next_page");
var prev = $(".pagination .prev_page");
if (no_reverse === true) {
var prev_link = $("<a href=\"#page=1\" class=\"prev_page\" rel=\"prev start\">&laquo; Previous<\/a>"); //assuming we show this when we're on p 2
} else {
var prev_link = $("<a href=\"#page=1\" class=\"prev_page\" rel=\"prev start\">Newer &raquo;<\/a>"); //assuming we show this when we're on p 2
}
var next_page_link = $(next).attr("href");
var p = next_page_link.match(/page=\b(\d.*?)\b/)[1]
var next_page_plain = next_page_link+'&format=list_only';
var total_pages = $(".pagination").attr('class').match(/\d+/)[0];
var hash_page = window.location.hash.match(/\d+/);
function injectCallBack() {
//use this to do stuff on the injected page
//i'm going to use it to create edit areas for logged in users
try {
$().createEditAreas();
}
catch(err) {}
}
function getContainerHeight() {
var injectedHeight = $(injected_div).outerHeight();
if (injectedHeight == 0 || null) {
var inner_el = "" + injected_div + " *:first";
var injectedHeight = $(inner_el).height();
}
return injectedHeight;
}
// if (p > 1 && window.location.hash == null) {
// window.location.hash = ('page='+(p-1)); // though here you can get ?page=2#page=3. so that's a problem
// }
/*
really want to keep people in one universe or another. either they're navigating with query strings or hashes.
though one problem is if they jump universes. maybe a redirect. if they come into ?page=2 and have js
enabled, they'll get redirected to #page=2 (can't rewrite URLs in the address bar). otherwise URL could be
confusing. For now, we'll assume they're coming into the base URL, and will navigate with hashes.
*/
if (!hash_page || hash_page == 1) {
updateNavLink("next_page",p);
}
if (hash_page) {
p = hash_page;
} else {
p = 1; //DEFINE p
}
/* logic */
$(injected_div) //spinner for ajax page load
.ajaxStart(function() {
$(this).css("height",getContainerHeight);
$(this).empty();
$(this).addClass("ajaxLoading");
})
.ajaxStop(function() {
$(this).removeClass("ajaxLoading");
$(this).css("height",'');
});
function showNewerBtn() {
$(prev).empty();
$(prev).show();
$(prev).append(prev_link);
$(".show_page_count").removeClass("page_count_without_prev");
}
function hideNewerBtn() {
$(prev).hide();
$(".show_page_count").addClass("page_count_without_prev");
}
function hideOlderBtn() {
$(next).hide();
}
function showOlderBtn() {
$(next).show();
}
function updateNavLink(direction,page) {
$(".pagination a."+direction).attr("href", "#page="+page+"");
}
function updatePageCountDisplay(p) {
if ($(".pagination .show_page_count") != null) {
$(".pagination .show_page_count").remove();
}
var show_page_count = "<span class='show_page_count'>"+p+"/"+total_pages+"<\/span>";
$(".pagination").append(show_page_count);
}
function updateHash(p) {
window.location.hash = "page="+p;
hash_page = p;
}
//initialize the page based on current conditions
if (hash_page > 1) {
showNewerBtn();
updatePageCountDisplay(p);
$(injected_div).load("?format=list_only&page="+hash_page, null, function() {
injectCallBack();
}); //load page
updateNavLink('next_page',parseInt(p)+1);
updateNavLink('prev_page',p-1);
}
if(hash_page == 1) {
hideNewerBtn();
}
if (p == total_pages || hash_page == total_pages) {
hideOlderBtn();
}
/* button actions -- need to merge these into one function */
//next button
$(next).click(function(){
p++; //increment page, and adjust links accordingly
//p is now 2 if I came in from base URL
$(injected_div).load("?format=list_only&page="+p, null, function() {
injectCallBack();
});
//show previous button if we're not on the first page
updateHash(p);
updatePageCountDisplay(p);
updateNavLink("next_page",p+1);
updateNavLink("prev_page",p-1); // << 3 | 2 | 1 >>
if (p > 1) {
showNewerBtn();
} else {
hideNewerBtn()
}
if (p == total_pages || hash_page == total_pages) {
hideOlderBtn();
} else {
showOlderBtn();
}
return false;
});
//previous button
$(prev).click(function() {
p--; //decrement page, and adjust links accordingly
//say we're on page 3, going to page 2. page is now 2.
$(injected_div).load("?format=list_only&page="+p, null, function() {
injectCallBack();
});
updateHash(p);
updatePageCountDisplay(p);
updateNavLink("next_page",p+1);
updateNavLink("prev_page",p-1); // << 3 | 2 | 1 >>
if (p <= 1) {
hideNewerBtn();
}
if (p >= 1) {
showOlderBtn();
}
if (p == total_pages || hash_page == total_pages) {
hideOlderBtn();
} else {
showOlderBtn();
}
return false;
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment