Ajax load more feature

Hi Shazzad,

I’ve added an ajax load more feature into your plugin that allows each new page to be added to current page rather than replace what is there with the current pagination feature. I’m sure you could probably improve upon this. Is it possible it could be added to a future update?

The changes i’ve made are in the navigation function in postlist.php file. I have posted the complete function below and provided comments where I have made changes.

All a user needs to do to implement it is make sure ajax=2 instead of 1 in their postlist template.

function navigation( $max_num_pages, $paged = 1, $attr = array() )
	{
		$nav_type = isset($attr['type']) ? $attr['type'] : '';
		$prev_text = isset($attr['prev_text']) && !empty($attr['prev_text']) ? $attr['prev_text'] : __('Previous', W4PL_TD);
		$next_text = isset($attr['next_text']) && !empty($attr['next_text']) ? $attr['next_text'] : __('Next', W4PL_TD);

		$return = '';

		$paged_qp = 'page'. $this->id; // the query parameter for pagination

		/*
		*
		* ADD THIS IF STATEMENT
		*
		*/
		if ($attr['ajax']==2){

			$base = remove_query_arg($paged_qp, get_pagenum_link()) . '%_%'; // remove current lists query parameter from base, other lists qr will be kept
			// if base already have a query parameter, use &.
			if( strpos($base, '?' ) )
			{ $format = '&'. $paged_qp . '=%#%'; }
			else
			{ $format = '?'. $paged_qp . '=%#%'; }

			if( in_array( $nav_type, array('plain', 'list') ) )
			{
				$big = 10;
				$pag_args = array(
					'type' 		=> $nav_type,
					'base' 		=> $base,
					'format' 	=> $format,
					'current' 	=> $paged,
					'total' 	=> $max_num_pages,
					'end_size' 	=> 2,
					'mid_size' 	=> 2,
					'prev_text' => $prev_text,
					'next_text' => $next_text,
					'add_args'	=> false // stop wp to add query arguments
				);

				$return = paginate_links( $pag_args );
			}

			// default navigation
			else
			{
				if( $paged == 2 )
					$return .= '<a href="'. remove_query_arg( $paged_qp ) .'" class="prev page-numbers prev_text">'. $prev_text . '</a>';
				elseif( $paged > 2 )
					$return .= '<a href="'. add_query_arg( $paged_qp, ($paged - 1) ) .'" class="prev page-numbers prev_text">'. $prev_text . '</a>';
				if( $max_num_pages > $paged )
					$return .= '<a href="'. add_query_arg( $paged_qp, ($paged + 1) ) .'" class="next page-numbers next_text">'. $next_text . '</a>';
			}

			if( !empty($return) )
			{
				$class = 'navigation';
				$use_ajax = isset($attr['ajax']) ? (bool) $attr['ajax'] : false;
				if( $use_ajax )
				{
					$class .= ' ajax-navigation';
					$this->js .= '(function($){$(document).ready(function(){$("#w4pl-list-'. $this->id
					. ' .navigation a.page-numbers").live("click", function(){var that = $(this), parent = $("#w4pl-list-'. $this->id
					. '");parent.addClass("w4pl-loading");parent.load( that.attr("href") + " #" + parent.attr("id") + " .w4pl-inner", function(e){parent.removeClass("w4pl-loading");});return false;});});})(jQuery) ;';
				}

				$return = '<div class="'. $class .'">'. $return . '</div>';
			}

		} /*ADD THIS CLOSING BRACKET*/

		/*
		*
		* ADD THE FOLLOWING
		*
		*/
		// if ajax=2 display load more
		if ($attr['ajax']==2){

			// Create load more link
			$base = remove_query_arg($paged_qp, get_pagenum_link());
			if( strpos($base, '?' ) )
			{ $format = '&'. $paged_qp; }
			else
			{ $format = '?'. $paged_qp; }

			$page_num = intval($paged);
			$page_num += 1;

			$load_more_url = $base . $format . '=' .$page_num;

			$this->js .= '
				(function($){
					$(document).ready(function(){
						$("#w4pl-list-'. $this->id . ' .load-more a").live("click", function(){
							var that = $(this);
							parent = $("#w4pl-list-'. $this->id . '");

							$(".load-more").addClass("spinner");
							$.get(that.attr("href"), function(data){
								parent.removeClass("w4pl-loading");
							  	$(".post-navigation").remove();
							  	$(data).find("#" + parent.attr("id") + " .w4pl-inner").contents().appendTo("#" + parent.attr("id") + " .w4pl-inner");
							});
							return false;
						});
					});
				})(jQuery) ;';

			if ($max_num_pages > $paged){
				$return = '<div class="load-more-outer">';
				$return .= '<div class="load-more"><a href="' . $load_more_url .  '">' . __('Load More', W4PL_TD) . '</a></div>';
				$return .= '</div>';
			}
		} /* THIS IS THE END OF MY ADDITION */

		return $return;
	}

All you need then is to style the 3 css classes I’ve used. The following is what I’m using, but you could use a simple rotating gif you they wanted to.

.load-more{
    border: 1px solid #DDD;
    width: 100%;
    padding: 10px 0px 10px 0px;
    text-align: center;
}

.load-more-outer{
    text-align: center;
    vertical-align: middle;
}

@-moz-keyframes spinner {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner:not(:required) {
  -moz-animation: spinner 1500ms infinite linear;
  -webkit-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
  -moz-box-shadow: rgba(58,132,165,0.6) 1.5em 0 0 0, rgba(58,132,165,0.6) 1.1em 1.1em 0 0, rgba(58,132,165,0.6) 0 1.5em 0 0, rgba(58,132,165,0.6) -1.1em 1.1em 0 0, rgba(58,132,165,0.6) -1.5em 0 0 0, rgba(58,132,165,0.6) -1.1em -1.1em 0 0, rgba(58,132,165,0.6) 0 -1.5em 0 0, rgba(58,132,165,0.6) 1.1em -1.1em 0 0;
  -webkit-box-shadow: rgba(58,132,165,0.6) 1.5em 0 0 0, rgba(58,132,165,0.6) 1.1em 1.1em 0 0, rgba(58,132,165,0.6) 0 1.5em 0 0, rgba(58,132,165,0.6) -1.1em 1.1em 0 0, rgba(58,132,165,0.6) -1.5em 0 0 0, rgba(58,132,165,0.6) -1.1em -1.1em 0 0, rgba(58,132,165,0.6) 0 -1.5em 0 0, rgba(58,132,165,0.6) 1.1em -1.1em 0 0;
  box-shadow: rgba(58,132,165,0.6) 1.5em 0 0 0, rgba(58,132,165,0.6) 1.1em 1.1em 0 0, rgba(58,132,165,0.6) 0 1.5em 0 0, rgba(58,132,165,0.6) -1.1em 1.1em 0 0, rgba(58,132,165,0.6) -1.5em 0 0 0, rgba(58,132,165,0.6) -1.1em -1.1em 0 0, rgba(58,132,165,0.6) 0 -1.5em 0 0, rgba(58,132,165,0.6) 1.1em -1.1em 0 0;
  display: inline-block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin: 1.5em;
  overflow: hidden;
  text-indent: 100%;
  position: relative;
  border: none;
  padding: 0px;
}

Regards,
Adrian

https://www.ads-software.com/plugins/w4-post-list/