JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://build-master.jaspersoft.com:7480/jrs-pro-feature-jive-refactoring/client/visualize.js"></script>
<!--Provide container to render your visualization-->
<div>
    <h4>Report parts</h4>
    <div id="reportPartsContainer"></div>
</div>
<div id="container"></div>

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "Organization_1"
    }
}, function (v) {

    //render report from provided resource
    var report = v.report({
        resource: "/public/Samples/Reports/Cascading_Report_2_Updated",
        error: handleError,
        container: "#container",
        success:function (data){
            console.log(data);
        },
        events: {
			reportPartsReady: handleReportParts
		}
    });
     
    //show error
    function handleError(err){
        alert(err.message);
    }
    
    $("#reportPartsContainer").on("click", ".jr_part", function(evt) {
        report.pages($(this).data("page")).run();
    });
    
    // handle report parts
    function handleReportParts(parts) {
        var btn, i = 0, partsContainer = $("#reportPartsContainer");
        
        partsContainer.empty();
        for (i; i < parts.length; i++) {
        	btn = $("<button class='jr_part' data-page='" + parts[i].page + "'>" + parts[i].name + "</button>");
            partsContainer.append(btn);
        }
    }
});