JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<button id="destroy">Destroy dashboard</button>
<button id="refresh">Refresh dashboard</button>
<button id="cancel" disabled>Cancel refreshing dashboard</button>
<div id="container"></div><script type='text/javascript' src="http://build-master.jaspersoft.com:7280/jrs-pro-feature-amber-dashboard-integration/client/visualize.js?_opt=true"></script>

CSS

#container {
    height: 800px;
}

JavaScript

function handleError(e) {
    alert(e);
}

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var dashboard = v.dashboard({
        resource: "/public/New_Dashboard",
        container: "#container",
        error: handleError
    });
    
    $("#destroy").click(function() {
        dashboard.destroy();
    });
    
    $("#cancel").click(function() {
        $("#refresh").prop("disabled", true);
        
        dashboard.cancel()
            .done(function() {
                console.log("dashboard refresh cancelled");
            })
            .fail(handleError)
            .always(function() {
                $("#refresh").prop("disabled", false);
            });
    });
    
    $("#refresh").click(function() {
        $("#cancel").prop("disabled", false);
        
        dashboard.refresh()
            .done(function() {
                console.log("dashboard refreshed");
            })
            .fail(handleError)
            .always(function() {
                $("#cancel").prop("disabled", true);
            });
    });
});