Skip to content

Instantly share code, notes, and snippets.

@admataz
Created March 9, 2012 12:34
Show Gist options
  • Save admataz/2006365 to your computer and use it in GitHub Desktop.
Save admataz/2006365 to your computer and use it in GitHub Desktop.
Jquery plugin to replace Drupal Views-based pagination with AJAX loading more button
/**
* -----------------------------
* Articles List (Home Page)
* -----------------------------
*/
;(function($){
$.fn.articlesList = function() {
var articleslist = this;
// using Drupal Views exposed form
var filterform = $('.view-filters form',articleslist);
// and the default pager element
var pager = $('ul.pager',articleslist);
//button to override the pager
var morebutton = $('<li class="morebutton endarticlelistbutton"><a href="javascript:void()">'+Drupal.t("See More")+'</a></li>');
var nomorebutton = $('<li class="morebutton endarticlelistbutton">'+Drupal.t("No more articles")+'</li>');
var loaderbutton = $('<div id="loader-icon"><img src="/sites/all/themes/theelders_fresh/images/icons/ajax-loader-24x24.gif"></div>');
var pagerenabled = false;
var feedlink = $('.feed a',articleslist);
//setup some data
articleslist.data({page:0,tid:'All'});
var enablePager = function(){
pager.html(morebutton);
pagerenabled = true;
//attach the click event
morebutton.bind('click',function(e){
$('#articleslist').append(loaderbutton);
$.get(
filterform.attr('action'),
articleslist.data(),
function(data){
var newcontent = $('#articleslist',$(data));
$('#articleslist').append(newcontent.html());
loaderbutton.remove();
setPager(data);
});
return false;
});
}
var disablePager = function(){
pager.html(nomorebutton);
pagerenabled = false;
}
var setPager = function(data){
//lord help us the format of this changes in Drupal Views mini pager
var newpagerdata = $('ul.pager .pager-current',data).text().split(' of ');
if(Number(newpagerdata[0])>=Number(newpagerdata[1])){
disablePager();
}else{
if(!pagerenabled){
enablePager();
}
articleslist.data({page:newpagerdata[0]});
}
}
setPager(articleslist.html());
//hide the submit button - not needed if we have JS
$('.views-exposed-widget.button',filterform).css('display','none');
//override the form submission with an onchange handler on the select filter
$('#edit-tid',filterform).change(function(e){
articleslist.data({page:0,tid:e.target.value});
$('#articleslist').html(loaderbutton);
$.get(
filterform.attr('action'),
articleslist.data(),
function(data){
var newcontent = $('#articleslist',$(data));
$('#articleslist').html(newcontent.html());
setPager(data);
}
);
})
feedlink.click(function(e){
//log($(e.currentTarget).attr('href'));
location.href=$(e.currentTarget).attr('href')+'?tid='+articleslist.data('tid');
return false;
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment