Public JavaScript Functions | Docs

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

Click
Filter
Reset
Start

Click

almTriggerClick() – This function will allow you trigger an Ajax Load More load from any element on the screen.

var button = document.querySelector('button#my_button');

button.addEventListener('click', function(e){

almTriggerClick();

});

Note: almTriggerClick should only be called when a single instance of Ajax Load More is on the page.

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 the 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 li a');

if(buttons){

// Loop each button and add click event

[].forEach.call(buttons, function(button) {

button.addEventListener('click', clickHandler);

});

}

<li>

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

</li>

<li>

<a href="#" data-button-label="More Posts" data-post-type="post">Latest Posts</a>

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