2. PHPRunner Tips and Tricks
  3. Guide 48 – Using the Dashboard API to reload panels by Ajax
This topic is locked

Guide 48 – Using the Dashboard API to reload panels by Ajax

 		1/20/2023 3:08:06 PM
PHPRunner Tips and Tricks
fhumanes author

In version 10.8 of PHPRunner , this API was incorporated for the Dashboards that allows us to do, among other things, “reload ” the panels from JavaScript.

Also, the use of "snippet " is enhanced, an element that I really like because it allows me to obtain 100% of the power of AnyChart . The only “bad” thing about the solution is that this new Dashborad API does not allow you to reload the snippets, but as you will see in this article, this can be solved easily.

Objective

Offer a simple example of a Dashboard with dependent panels and snippet type, refreshing the data by programming. In addition, the possibility of having a search panel is shown, for the introduction of the selection criteria of the data that we wish to consult.

DEMO : https://fhumanes.com/dashboard_api/

Technical Solution

The made dashboard page is:

img alt

The green panel is used as a form and allows us to define the query for a province in Spain.

The upper panel on the right is a simple snippet that counts the number of times the user has executed it and the code of the selected province.

The two lower blue panels are dependent PHPRunner tables, that is, if province is selected, it updates the Municipalities panel and shows the Municipalities of the selected province.

The JavaScript for the “reload ” of the panels is located in the JavaScript onload event of the ADD page of the Province view. You have this code:

$('.nav-tabs').hide(); // HIDE tab by ADD
$('.alert-success').hide(); // HIDE Menssage OK

var reload = proxy['reload'];

if (reload == 'yes'){
$('div[data-itemid="dashboard-item2"').attr('modified','yes');

$.ajax({ // Reload the Snippet
url: 'MyCode/snippet1_ajax.php',
dataType: "html",
type: "Get",
data: { }
}).done(function (response) {
//alert('test');
// $('div[data-itemid="dashboard-item2"').empty();
$('div[data-itemid="dashboard-item2"').html(response);
});
// Reload panel the tables
var pages = Runner.dashboard.getElementPages("dashboard-item");
pages.forEach(page => {
page.reload({a:'reload'});
})

};

If you are interested in this topic, access all the information in this article.