Box Refresh Plugin

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


This plugin can be activated using the data-api or jQuery.

Data Api

Activate the plugin by adding data-widget="box-refresh" to the box 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 .box-body section of the box. 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
params Object {} GET query paramaters (example: {search_term: 'layout'}, which renders to URL/?search_term=layout)
trigger String .refresh-btn The CSS selector to the refresh button
content String .box-body The CSS selector to the target where the content should be rendered. This selector should exist within the box.
loadInContent Boolean TRUE Whether to automatically render the content
onLoadStart Function Anonymous Function Called before the ajax request is made
responseType String '' Response type (example: 'json' or 'html')
overlayTemplate String TRUE The HTML template for the ajax spinner
onLoadDone Function Anonymous Function Called after the ajax request is made. A response parameter is passed to the function that hold the server response.


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

Example: $('#my-box-widget').boxRefresh('load')

Material Dashboard Pro

Material Dashboard Pro ─ $59

Angular 2 Premium Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design

Preview Buy Now

853+ purchases