Public JS Functions

The following public JavaScript functions allow for the manipulation of Ajax Load More instances.

Click

ajaxloadmore.click(id) – This function will allow you to trigger an Ajax Load More load action from any element on the screen.

// Trigger a click event.
ajaxloadmore.click();

// Trigger a click event on instance ID 'portfolio'.
ajaxloadmore.click('portfolio');

Filter

ajaxloadmore.filter(transition, speed, data) – This function will allow you to update Ajax Load More parameters on the fly and provide a clean transition between each filter.
» View Example

The filter() method requires the following parameters:

// Click Handler Function
function clickHandler(){
	var transition = 'fade';
	var speed = 250;
	var data  = this.dataset;
	
	// Call Ajax Load More `filter` method
	ajaxloadmore.filter(transition, speed, data);
}

// Get All Filter Buttons
var buttons = document.querySelectorAll('ul.filters button');
if(buttons){
   // Loop each button and add a click event
	[].forEach.call(buttons, function(button) {
		button.addEventListener('click', clickHandler);
	});
}

<!-- Example HTML Markup -->
<ul class="filters">
	<li>
		<button data-post-type="portfolio" data-button-label="More Work">Recent Work</button>
	</li>
	<li>
		<button data-post-type="post" data-button-label="More Posts">Recent Work</button>
	</li>
</ul>

Note: When filtering, underscores in shortcode attributes must be converted to dashes. e.g. button_label = button-label

Reset

ajaxloadmore.reset() – This function will allow you to reset Ajax Load More back to page 1 of a listing. This function is useful in cases where content may have changed and Ajax Load More is required to be started from the beginning.

var button = document.querySelector('button#my_button');
button.addEventListener('click', function(e){
   ajaxloadmore.reset();
});

Start

ajaxloadmore.start(element) – This function will initiate an instance of Ajax Load More. This is most commonly used when Ajax Load More has been loaded via Ajax.

var element = document.querySelector(".ajax-load-more-wrap"); // Ajax Load More div wrapper.
ajaxloadmore.start(element);

getPostCount

ajaxloadmore.getPostCount() – This function will return the loaded post count in the current query by ALM instance ID.

var count = ajaxloadmore.getPostCount(id);
document.querySelector('span.count').innerHTML = count;

Note: The ID parameter in the getPostCount function is optional and will fall back to the default instance if not present.

getTotalPosts

ajaxloadmore.getTotalPosts() – This function will return the total number of posts in the entire query by ALM instance ID.

// [ajax_load_more id="portfolio"]
var count = ajaxloadmore.getPostCount('portfolio'); 
var total = ajaxloadmore.getTotalPosts('portfolio'); 
document.querySelector('h1').innerHTML = 'Showing ' + count + ' of ' + total + ' posts';

Note: The ID parameter in the getTotalPosts function is optional and will fall back to the default instance if not present.

getTotalRemaining

ajaxloadmore.getTotalRemaining() – This function will return the total number of posts remaining to be loaded  by ALM instance ID.

// [ajax_load_more id="portfolio"]
var remaining = ajaxloadmore.getTotalRemaining('portfolio'); 
document.querySelector('h1').innerHTML = remaining + ' posts remaining.'; // 15 posts remaining.

Note: The ID parameter in the getTotalRemaining function is optional and will fall back to the default instance if not present.