|
|
---
|
|
|
layout: page
|
|
|
title: 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.
|
|
|
|
|
|
```js
|
|
|
("#my-card").refreshBox(options)
|
|
|
```
|
|
|
|
|
|
##### Options
|
|
|
{: .mt-4}
|
|
|
|
|
|
|---
|
|
|
| Name | Type | Default | Description
|
|
|
|-|-|-|-
|
|
|
|
|
|
|
|
|
source: '',
|
|
|
sourceSelector: '',
|
|
|
params: {},
|
|
|
trigger: Selector.DATA_REFRESH,
|
|
|
content: '.card-body',
|
|
|
loadInContent: true,
|
|
|
loadOnInit: true,
|
|
|
responseType: '',
|
|
|
overlayTemplate: '<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>',
|
|
|
onLoadStart: function () {
|
|
|
},
|
|
|
onLoadDone: function (response) {
|
|
|
return response;
|
|
|
}
|
|
|
|
|
|
| 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')`
|
