Card Refresh Plugin

The card refresh plugin provides the functionality for loading ajax content into the card.


This plugin can be activated as a jQuery plugin or using the data API.

Data API

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.


The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.

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.
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.

Example: $('#my-card [data-card-widget="card-refresh"]').on('loaded.lte.cardrefresh', handleLoadedEvent)

Method Description
load Reloads the content and runs the onLoadStart and onLoadDone hooks

Example: $('#my-card-widget').Widget('toggle')