Lightweight plugin to make ajax call and block rendering

BrokkJS gives your code an easy and lightweight way to render block, submit form and make button action with ajax calls.

Get started now View it on GitHub

---

Getting started

Installation

Download:

• jquery.brokk.min.js
• jquery.brokk.js - for development (not minified)

<script src="/change/path/to/jquery.brokk.min.js"></script>

Or use CDN:

<script src="https://unpkg.com/brokkjs/dist/jquery.brokk.min.js"></script>

Or install with npm:

npm install brokkjs

How to Use

Via jquery plugin

$(document).ready(function(){
    $(selector).brokk({
        requestUrl: '/url-that-return-json',
        toUpdateElements: selector,
        onSuccess: function (args) {
            this.onSuccess(args); // Call default plugin onSuccess callback
            alert('Success!');
        },
    });
});

Via data attribute

<div data-brokk-request-url="/url-that-return-json" data-brokk-to-update-elements="this"></div>

$(document).ready(function(){
    $(selector).brokk();
});

Access instanciated object Api

 $(selector).brokkApi().fire();

Default options and functions

Any option can be passed through the use of a data attribute or plugin object.

$.fn.brokk.defaults = {
    requestUrl: null,
    requestMethod: 'GET',
    requestParams: null,
    fireEvent: $.fn.brokk.fireEvents.ON_READY,
    toUpdateElements: [],
    toUpdateElementsOverlay: 'Loading',
    triggerElements: [],
    triggerElementsOverlay: null,
    toFireSuccessElements: [],
    before: function (args) {
        this.before(args);
    },
    onSuccess: function (args) {
        this.onSuccess(args);
    },
    onError: function (args) {
        this.onError(args);
    },
    onComplete: function (args) {
        this.onComplete(args);
    },
    onClick: function (args) {
        this.onClick(args);
    }
};

Options

This is a list of all the BrokkJs configuration options.

Option	Type:Default	Description
requestUrl REQUIRED data-brokk-request-url	string:null	This is the url where Brokk will make the request.
requestMethod data-brokk-request-method	string:GET	Used to define the HTTP request method.
requestParams data-brokk-request-params	object:null	Allow you to pass params with the request.
fireEvent data-brokk-fire-event	$.fn.brokk.fireEvents :$.fn.brokk.fireEvents.ON_READY	Event that will trigger the request, by default is when dom is ready. You can also trigger it onClick, onSubmit, manually or disable any request.
triggerElements data-brokk-trigger-elements	array:[]	Array of dom elements that will be disabled during du request. Ex: ['#my-button']
triggerElementsOverlay data-brokk-trigger-elements-overlay	object:null	String or html that will replace html of triggerElements during loading. By default triggerElements’s html will no be changed.
toUpdateElements data-brokk-to-update-elements	array:[]	Array of dom elements that will be fulfilled with request result.
toUpdateElementsOverlay data-brokk-to-update-elements-overlay	string:Loading...	String or html that will be appended on toUpdateElements during loading.
toFireSuccessElements data-brokk-to-fire-success-elements	array:[]	Array of dom elements initialized with Brokk to fire on request success.

Functions

before

This function is called before making the Ajax call. By default, this function add a class and attribute disabled on all triggerElements. If showOverlay is true a loading overlay is displayed on all toUpdateElements.

onSuccess

This function is called when ajax call return a success HTTP code. By default, replace HTML with data returned by the URL called,fire() function use args.data to transmit data to this function.

onError

This function is called when ajax call return an error HTTP code. By default, do nothing.

onComplete

This function is always called after Ajax call. By default, this function remove class and attribute disabled on all triggerElements. Remove loading overlay on all toUpdateElements.

onClick

Callback for click event on initialized Brokk element.

onKeypress

Callback for keypress event on initialized Brokk element. Works only when key is Enter.

onSubmit

Callback for submit event on initialized Brokk element.