2.7 KiB
| layout | title |
|---|---|
| page | Card Refresh Plugin |
The card refresh plugin provides the functionality for loading ajax content into the card.
Usage
This plugin can be activated as a jQuery plugin or using the data api.
Data API
{: .text-bold }
Activate the plugin by adding a button with data-card-widget="card-refresh" to the card and provide the required data-source="/URL-TO-CONTENT" option. By doing that, the plugin will automatically create a GET request to the provided URL and render the returned response the .card-body section of the card. If you need to process the returned response before rendering, you should use the jQuery API, which provides hooks to deal with the response.
jQuery
{: .text-bold } The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.
("#my-card").refreshBox(options)
Options
{: .mt-4}
|---
| Name | Type | Default | Description |
|---|---|---|---|
| source | String | '' | The URL to the source. |
| sourceSelector | String | '' | A selector to get return only the content of the selector. |
| params | Object | {} | GET query paramaters (example: {search_term: 'layout'}, which renders to URL/?search_term=layout) |
| trigger | String | [data-card-widget="card-refresh"] |
The CSS selector to the refresh button |
| content | String | .card-body |
The CSS selector to the target where the content should be rendered. This selector should exist within the card. |
| loadInContent | Boolean | TRUE | Whether to automatically render the content. |
| loadOnInit | Boolean | TRUE | Init plugin on page load. |
| responseType | String | '' | Response type (example: 'json' or 'html') |
| overlayTemplate | String | TRUE | The HTML template for the ajax spinner |
| onLoadStart | Function | Anonymous Function | Called before the ajax request is made |
| onLoadDone | Function | Anonymous Function | Called after the ajax request is made. A response parameter is passed to the function that hold the server response. |
| {: .table .table-bordered .bg-light} |
Events
{: .mt-4}
|---
| Event Type | Description |
|---|---|
| loaded.lte.cardrefresh | Triggered after a card is refreshed. |
| overlay.added.lte.cardrefresh | Triggered after the overlay added to the card. |
| overlay.removed.lte.cardrefresh | Triggered after the overlay removed from the card. |
| {: .table .table-bordered .bg-light} |
Example: $('#my-card [data-card-widget="card-refresh"]').on('loaded.lte.cardrefresh', handleLoadedEvent)
Methods
{: .mt-4}
|---
| Method | Description |
|---|---|
| load | Reloads the content and runs the onLoadStart and onLoadDone hooks |
| {: .table .table-bordered .bg-light} |
Example: $('#my-card-widget').Widget('toggle')