admataz
3/9/2012 - 12:34 PM

Jquery plugin to replace Drupal Views-based pagination with AJAX loading more button

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);