jBob

.async-modal

When clicked, an .async-modal button will fetch a Bootstrap modal from a given URL and will display it. When closed, the modal is destroyed and removed from the DOM.

The URL can be both in the data-modal-url attribute or, if the trigger is an anchor, in the href attribute.

.async-tab

A Bootstrap tab having the .async-tab CSS class will fetch his contents from the URL in data-tab-url when activated.

When the tab is no longer active, his contents are removed again from the DOM and to be reloaded at the next activation. Unless the .keep-contents is also used, in which case the contents are loaded once.

• First
• Second
• Third (loaded once)

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#first-tab" type="button" role="tab">First</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link async-tab" data-tab-url="/samples/remote_content.html" data-bs-toggle="tab" data-bs-target="#second-tab" type="button" role="tab">Second</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link async-tab keep-contents" data-tab-url="/samples/remote_content.html" data-bs-toggle="tab" data-bs-target="#third-tab" type="button" role="tab">Third (loaded once)</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="first-tab" role="tabpanel">
        <p>
            This content is already in the page. Click the Second tab!
        </p>
    </div>
    <div class="tab-pane fade" id="second-tab" role="tabpanel">
        <!-- This is left empty: the contents of the tab are fetched every time the tab itself is activated -->
    </div>
    <div class="tab-pane fade" id="third-tab" role="tabpanel">
        <!-- This is left empty: the contents of the tab are fetched once, when the tab itself is activated -->
    </div>
</div>

.async-accordion

A Bootstrap accordion having the .async-accordion CSS class will fetch his contents from the URL in data-accordion-url when activated (every time it is activated, by default; only once, if the .keep-contents is also used).

The behavior is to be attached to the main .accordion-item: you can provide your static contents for .accordion-header, the fetched HTML is appended into .accordion-body

.async-popover

A .async-popover button has a popover which contents as dinamycally fetched from the given URL when activated. On the contrary of other components, an async popover keeps its contents even when closed (so are fetched just once).

Remember that Bootstrap popovers have to be explicitely inited in your own JS: it is not automatically managed to avoid conflicts with other popovers not handled with jBob.

.modal-form

A form within a Bootstrap modal and having the .modal-form CSS class, when submitted is serialized (using the serializeForm() function), submitted to the given action URL using his own method, and - on success - the parent modal is closed.

.dynamic-table

A dynamic table permits to add and remove rows dynamically. The click on the element with the CSS class .add-row triggers the append of a new row, the click on .remove-row removes the current row.

The contents of tfoot are used as template for newly added contents: remember to hide it, using a specific CSS rule or with a hidden attribute.

.infinite-scroll

Infinite scroll is based on Bootstrap's pagination: you can implement single pages linked each other, using classic pagination, while jBob uses the pagination widget as reference to dinamycally load and inject contents in the user's viewport.

The .infinite-scroll node's contents of each loaded page will be isolated and appended to the .infinite-scroll in the initial page; the .active class set in the pagination buttons will be used to determine the next page to load.

.delete-on-close

When applied to a Bootstrap's modal, it is removed from DOM when closed. Natively used for all modals fetched with .async-modal

init(params)

Accepts an optional object for parameters:

• initFunction: a callback to be called on all HTML fragments fetched asynchronously, to provide your own extra initialization on new HTML nodes injected into the page. A parameters is passed to the function, which is the new HTML node itself. This will be called for every new piece of HTML attached in the DOM by jBob: when fetching contents with async widgets, when adding a row to a .dynamic-table, when using fetchNode() and more. For your convenience, it is also invoked once on the entire $('body') when the library is inited
• fixBootstrap: an array of Bootstrap's jQuery plugins for which enforce initialization. "Modal" and "Popover" are handled by default, you can add others. This may be required under certain situations, where Bootstrap fails to identify jQuery and do not inits his own plugins. In this case, you have to explicitely import Boostrap and make it globally accessible from the window object under the name bootstrap.

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

import jBob from 'jbob';

$(document).ready(function() {
    let j = new jBob;

    j.init({
        initFunction: function(container) {
            $('#myselector', container).myfunction();
        },
        fixBootstrap: ['Tooltip', 'Toast'],
    });
});

initElements(container)

To be used when you append new elements in the DOM, to call the initialization function on the new fragment. This implies jBob own initialization and your own custom, as provided to init()

Can be invoked multiple times on the same element (for example: if you append a new .async-tab to an existing tabs group); jBob provides to init his own interactions once by tagging the already inited nodes with the .jb-in CSS class.

$(document).ready(function() {
    let j = new jBob;

    j.init({
        initFunction: function(container) {
            $('#myselector', container).myfunction();
        },
    });

    $.ajax({
        url: '/my/endpoint',
        method: 'GET',
        dataType: 'HTML',
        success: (data) => {
            data = $(data);

            /*
                Here, all jBob behaviors are inited and the function
                in initFunction() is called on $data
            */
            j.initElements(data);

            $('body').append(data);
        }
    });
});

assignIDs(selector, container)

For each node matching the jQuery selector found in container, generates a random ID attribute (if none is already found).

j.assignIDs('.my-button', $('body'));

fetchNode(url, node)

Fetches HTML from the given url and replaces the contents of node in DOM.

The function itself returns a Promise to track actual fetch activity.

j.fetchNode('/my/endpoint', $('.target-node'));

reloadNode(node)

Almost like fetchNode(), but can be directly applied to "async" nodes for auto refetch their contents.

Otherwise, node must have a data-reload-url attribute with the URL from where get the new HTML. node is replaced with the new HTML (not only his contents).

<div class="target-node" data-reload-url="/my/endpoint"></div>

...

j.reloadNode($('.target-node'));

submitButton(form)

Utility intended to easily retrieve the submit button of a form; it may be both within the form itself (button[type=submit]) or external (having a form attribute which value matches the id of the intended form).

<form id="this-is-a-form">
    <input type="text" name="test">
</form>

<button form="this-is-a-form" type="submit">Submit</button>

...

j.submitButton(form).prop('disabled', true);

serializeForm(form)

Like the jQuery's native serialize(), but skips elements having the .skip-on-submit CSS class.

<form>
    <input type="hidden" class="skip-on-submit" name="no_serialize" value="1">
    <input type="text" name="serialize">
</form>

...

j.serializeForm($('form'));

makeSpinner()

Just creates a div with a Bootstrap Spinner.

let spinner = j.makeSpinner();
$('.target-node').empty().append(spinner);

onScreen(node, offset = 0)

Tests if the given jQuery node is completely within the current viewport. Optionally, pass a second argument with an extra offset to be considered (e.g. if node is at 200px from the viewport).

$(window).on('scroll', () => {
    if (j.onScreen($('.target-node'), 200)) {
        console.log('yes');
    }
});

jb-before-async-fetch

Triggered by .async-modal, .async-tab, .async-accordion and .infinite-scroll before to start the actual fetch of contents.

$('.async-modal').on('jb-before-async-fetch', (e) => {
    console.log('Start Fetching');
});

jb-after-async-fetch

Triggered by .async-modal, .async-tab, .async-accordion and .infinite-scroll when the fetch is complete and the retrieved data have been appended in the DOM.

The callback receives an extra parameter which is true when everything goes well and false when an error occurred.

$('.async-modal').on('jb-after-async-fetch', (e, status) => {
    if (status == true) {
        console.log('ok');
    }
    else {
        console.log('ko');
    }
});

jb-table-row-added

Triggered by .dynamic-table when a new row is added to the table.

The callback receives the row itself as parameter.

$('.dynamic-table').on('jb-table-row-added', (e, row) => {
    console.log('row added');
});

jb-table-row-removed

Triggered by .dynamic-table when a row is removed from the table.

The callback receives the row itself as parameter.

$('.dynamic-table').on('jb-table-row-removed', (e, row) => {
    console.log('row removed');
});