Public JavaScript Functions | Docs

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

Click
Filter
Reset
Start
getTotalPosts
getPostsCount
getTotalRemaining

Click

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

id	The Ajax Load More ID. null

// Trigger a click event.

ajaxloadmore.click();

// Trigger a click event on the Ajax Load More instance with the ID of '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:

transition	Select a transition type. ‘fade’ \| null
speed	The speed of the transition, in milliseconds. e.g. ‘300’
data	The data() object that holds the parameters for updating.

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

});

}

<li>

<button type="button" data-post-type="portfolio" data-button-label="More Work">Recent Work</button>

</li>

<li>

<button type="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.

1 2	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.

1 2	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.