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.

$('#my-card [data-card-widget="card-refresh"]').CardRefresh(options)
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.
loadErrorTemplate Boolean   TRUE Whether to append the errorTemplate to the card when an ajax error occurs.
responseType String   ’’ Response type (example: ‘json’ or ‘html’)
overlayTemplate String   TRUE The HTML template for the ajax spinner
errorTemplate String   '<span class="text-danger"></span>' The HTML template for an ajax error message
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.
onLoadFail Function   Anonymous Function Called if the ajax request fails. jqXHR, textStatus and errorThrown parameters are passed to the function.
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 [data-card-widget="card-refresh"]').CardRefresh('load')