Updating Report Widget partials with AJAX

October provides a robust and feature rich dashboard system that allows users to add any number of widgets. These widgets are useful for displaying high level metrics, such as page views, access logs, etc.

You may find the need to update this content dynamically, based upon some action the user could make within the report widget. October's AJAX framework makes this relatively easy, so long as you know what to return from your AJAX handler.

This trick will provide an example of how to update your report widget partial using October's AJAX framework.

Note: This trick assumes you have already created your report widget class and have a partial that needs to be updated. If you need help creating a report widget, please see the documentation Report Widgets.

1. Add a element to your partial to make the AJAX request. Here is an example:

   <button
   data-request="onUpdateWidget">
   Update
   </button>

2. Add a new method to your report widget class public function onUpdateWidget(). For example:

   public function onUpdateWidget()
   {
   return [
       '#'.$this->alias => $this->render()
       ];
   }

The secret sauce here is the widget's alias property, which determines which widget is actually being updated. Your widget should already have a render() method which returns the contents of the widget partial.

Now, when you click the button in your report widget, the AJAX framework will make a request and call the handler onUpdateWidget. In this example, we have re-rendered the widget itself so any changes to data will be displayed.

We are free to return any content we wish, even other partials, or static content. The possibilities are limitless!