Skip to content
Ronald Chan edited this page Mar 6, 2012 · 2 revisions

AJAX Pagination has a number of events which are triggered when changing pages. These can be used to customize the behaviour of AJAX Pagination, including the animations, and the way the retrieved response is displayed.

Before going through the events fired specifically by AJAX Pagination, it is worth mentioning that AJAX Pagination uses jquery-ujs and its data-remote attribute, when links are followed, or forms are submitted. Therefore, those events can be used for custom functionality. More information on these events can be found in the jquery-ujs wiki. However, jquery-ujs is not used when changing content through browser history. This is because no specific link or form is triggered. It is also worth mentioning that the jquery-ujs events are triggered at the link or form DOM element. However, the AJAX Pagination events are triggered from the pagination section.

The following are the events fired by AJAX Pagination:

Event name Extra parameters When the event triggers Return value
ajaxp:before [requesturl] before any AJAX operations begin returning false cancels AJAX request
ajaxp:beforeSend [jqXHR,settings] before request is sent, settings are immutable at this point returning false cancels AJAX request
ajaxp:loading when pagination section transitions from a non-loading state to a loading state - if already loading content, this event does not trigger again if another request is made for the same section returning false prevents default behaviour, which is to disable the loading zone, and add a loading image animation on top
ajaxp:focus after ajaxp:loading returning false prevents default behaviour, which is to scroll upwards as necessary until top of paginated section is visible
ajaxp:done [content] on receiving a successful response to the AJAX request returning false prevents default behaviour, which is to replace everything in the paginated section with the content of the response
ajaxp:fail [content] on receiving an unsuccessful response to the AJAX request returning false prevents default behaviour, which is to replace everything in the paginated section with the content of the unsuccessful response
ajaxp:loaded after ajaxp:done or ajaxp:fail no default behaviour

Note that in all cases, returning false also prevents all other event handlers which might be bound to the event from executing.

The ajaxp:loading event can be used to change the type visual cue given when loading. It can also be used to add to the visual cues displayed by default. Please note that it is better to use css to change the styling if the visual cue you want is similar to the default behaviour.