load-more-content.js

/**
 * Load more content over ajax in a nice manner
 *
 * This script utilizes Font Awesome to give proper visual feedback
 * while the new content is being fetched and loaded
 *
 * Usage:
 * - Attach the class 'load-more-content' to any a tag in the DOM
 * - Give this object a data attribute of data-content-area which indicates
 * what part of the site is to be loaded in
 *
 * Example:
 * <a href="www.site.com/list/page/2" class="load-more-content" data-content-area="#main">This is a link</a>
 *
 * The script will now look for any object with the id "main" on page 2 and
 * append this to the id "main" on the current page.
 * It will also look for an instance of it self on the next page to update the load more address.
 *
 * Gracefully degrades if JavaScript should be disabled as the link is still a link to the next page
 */
jQuery(document).ready(function ($) {
	$("body").on( 'click', '.load-more-content', function (e) {
		e.preventDefault();
		var $request = $(this),
			label = $(this).html();

		$(this).html('<i class="fa fa-spinner fa-spin"></i>');

		$.post(
			$request.attr('href'),
			function (next_page) {
				var content = $($request.data('content-area'), next_page).html();
				var $more = $("[data-content-area='" + $request.data('content-area') + "']", next_page);

				content = '<div class="load-more-content-new-content" style="display: none;">' + content + '</div>';

				$($request.data('content-area')).append( content );

				$(".load-more-content-new-content").slideToggle().removeClass('load-more-content-new-content');

				if ( 'undefined' != typeof( $more.attr('href') ) ) {
					$request.html(label);
					$request.attr('href', $more.attr('href'));
				} else {
					$request.fadeOut();
				}
			}
		);
	});
});