Loading data async through ajax

Cord commented on Oct 9, 2019

Am building a dashboard with many widgets and want to load data asynchronous through data endpoints - otherwise all data would be rendered in the same request. Can't find any solution in the documentation or examples. Is this not possible?

KoolReport commented on Oct 9, 2019

Hi Cord,

You can do this way:

Create several sub report and each sup report holds a widget that you want to updated via ajax.
In the main report, you register those sub reports in setings() as normally do.
In the view file of main report, instead of using $this->subReport("your-sub-report-name"); you do:

<sub-report id='your-sub-report-name' name='your-sub-report-name'></sup-report>

In the main report, you do:

$(document).ready(function(){
        subReport.update("your-sub-report-name");
        subReport.update("your-sub-report-name-2");
        subReport.update("your-sub-report-name-3");
});

Remember to register jQuery and SubReport in main report. So at the first load of report, the main report is very fast in rendering, and then it will execute the update() function for each sub-report. It will make ajax calls to load content for each sub report. The widgets in sub-report will initiate itself.

Let me know if it works.

Cord commented on Oct 9, 2019

Can you guide me through with links to the documentation where to configure the entry points which will deliver the data to show? Best would be a working example.

Steph commented on Apr 17, 2020

I found this page when I was looking for the same thing - dynamically updating the dashboard so here's a bare bones example - no styling, just show a card which updates with the Unix time every second.

Hope that helps.

index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script>
            function updateDashboard(){
                subReport.update("showTime");
            }

            $(document).ready(function(){
                setInterval(updateDashboard, 1000);
            });
        </script>
    </head>
    <body>
        <h1>KoolReport Ajax Example</h1>
        <?php include "dashboard.php" ?>
    </body>
</html>

dashboard.php

<?php
require_once "vendor/koolreport/core/autoload.php";

include "showTime.php";

class dashboard extends \koolreport\KoolReport
{
    use \koolreport\core\SubReport;

    public function settings()
    {
        return array(
            "subReports"=>array(
                "showTime"=>showTime::class
            )
        );
    }

    public function setup()
    {
    }
}

$d1 = new dashboard;
$d1->run()->render();
?>

dashboard.view.php

<?php
use \koolreport\widgets\koolphp\Card;

$this->subReport("showTime");
?>

showTime.php

<?php
class showTime extends \koolreport\KoolReport
{
    public function settings()
    {
    }

    public function setup()
    {
    }
}
?>

showTime.view.php

<?php
use \koolreport\widgets\koolphp\Card;

Card::create(array(
    "title"=>"Unix Time",
    "value"=>time()
));
?>

KoolReport commented on Apr 22, 2020

It is a great example. Thanks Steph!

KoolReport's Forum

Loading data async through ajax #1118

Build Your Excellent Data Report