Usage

Following example shows different ways of using this extension.



Click above buttons to load content here
<a class="btn btn-primary" href="path/to/file.html" data-provide="loader" data-target="#loader-target">Link element</a>

<button class="btn btn-primary" data-provide="loader" data-url="path/to/file.html" data-target="#loader-target">Button element</button>

<button class="btn btn-primary" data-provide="loader" data-url="path/to/file.html" data-target="#loader-target" data-spinner='<div class="spinner-circle mx-auto"></div>'>Using data-spinner</button>


<div id="loader-target">Click above buttons to load content here</div>
Example

This example demonstrate the simplest example of using the library. When this button is clicked an AJAX POST request is sent to /example and the response content is swapped in to the body of the button

<button ic-post-to="/example">Click Me!</button>

Usage

The core attributes of intercooler are: ic-get-from, ic-post-to, ic-put-to, ic-patch-to and ic-delete-from.

Each of these attributes takes a (typically server-relative) URL to issue a request to and then issue an HTTP GET, POST, PUT, PATCH or DELETE respectively, when the element they are declared on is triggered (see below) and then loads the content of the response into the element.

Here is an example button that issues a PUT:

<button ic-put-to="/put_demo">Put Me!</button>

Please refer to the official documentation to find out about full features of this library.