ajaxify jQuery plugin updated with events

May 12, 2014 One-minute read

I’ve updated the jQuery ajaxify plugin to optionally raise events to allow for more flexible hooking into its flow.
Given a DOM like

<div id="wrapper">
    <div class="menu">
        <ul>
        <li><a href="/link1">Link 1</a></li>
        <li><a href="/link2">Link 2</a></li>
        <li><a href="/link3">Link 3</a></li>
        <li><a href="/link4">Link 4</a></li>
        </ul>
    </div>
    <div id="main">
        <div id="main-content">
            some lorem here
        </div>
    </div>
</div>

using the plugin on it like

$('#wrapper').ajaxify({
    useCallbacks: false,
    raiseEvents: true}
    ).find('a[href="link1"]').click();

will raise the following events on the #wrapper element

ajaxAnchorClicked
beforeLoad
afterLoad

other events are the plugin will raise below

afterFail
excludedClicked
externalClicked

The events will pass some data along to listeners. I’ve updated the Ajax Navigation block plugin to take those new options into account. The ajaxifySubmit plugin will follow as soon as I have time and the Ajax Search block plugin with it.