@kiralt/bjax

Welcome to Bjax 2.0

Ajax link system for modern website. Convert any link in your page to ajax link.

New V2 version on pure VanilaJS, lightweight and super fast!

Install

NPM

npm install @kiralt/bjax

Browser

<script src="https://unpkg.com/@kiralt/bjax/dist/bjax.full.js"></script>

In browser build, all funtions will be exported on window.Bjax.

Usage

Binding links

You can convert all links to Bjax links using bindLinks with a selector.

bindLinks('a')

Or you can bind on data-bjax selector.

bindLinks('[data-bjax]')

Loading part of a page

You can specify source and target using data attributes:

<a href="/" data-bjax data-source="#source" data-target="#target">My link</a>

Or you can specify that information when binding:

bindLinks('data-bjax', {
    source: '#source',
    target: '#target'
})

Also, you can use data-selector attribute or selector parameter to specify both target & source with one parameter.

Manually loading

You can load link manually using loadLink function.

loadLink('https://my.page/second-page', {
    target: '#part'
})

This will download whole page and insert it into element with part ID.

Bind manually

Using liveBind and loadLink you can customize bindings as much as you wish.

liveBind('[data-bjax]', 'click', function(event, element) {
    event.preventDefault()
    if (element instanceof HTMLAnchorElement) {
        loadLink(element.href, {
            selector: '#container'
        })
    }
})

Functions

loadLink(url, [options])

Downloads page from url and updates current page using downloaded HTML.

loadLink('https://my.page/second-page')

Options:

• target - DOM selector where should be inserted downloaded page HTML (default is body).
• source - DOM selected which indicates which part from downloaded page should be extracted (default is body).
• selector - Overwrites both target and source (default: undefined).
• shouldUpdateUrl - indicates if the url should be updated using url parameter using pushState (default is true).
• loader - custom loader instance (default is empty loader - {}).
• successCallback - callback which is called if the function finished the work without an error.
• errorCallback - Callback which is called if the function had an error and failed to finish.

bindLinks(selector, [options])

Binds loadLink funtion on given selector using liveBind.

bindLinks('a[data-bjax]')

Supports all loadLink options.

Additional options:

• url - target page URL, default is undefined and urlAttribute parameter is used.
• urlAttribute - url parameter value, which is taken from clicked element (default is href).
• targetAttribute - target parameter value, which is taken from clicked element (default is data-target).
• sourceAttribute - source parameter value, which is taken from clicked element (default is data-source).
• selectorAttribute - selector parameter value, which is taken from clicked element (default is data-selector).

liveBind(target, eventName, callback)

Listens eventName events on window object. Because it binds on window object, you can change inner DOM and it won't effect this bind at all.