JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript' src="http://localhost:8610/jasperserver-pro/client/visualize.js?_opt=true"></script>

<div id="container"></div>

JavaScript

visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
var button = $("button");

report = v.report({
// resource: "<%=requestedResource%>",
//resource: "/public/Samples/Reports/AllAccounts",
//resource: "/organizations/TNSTO/Reports/iPAS/visualizetest",
resource: "/public/case_68059/visualizetest",
container : "#container",
// params : o ,
error: handleError,
events: {
changeTotalPages : function(){
//spinner.hide();
}
}
});

$("#previousPage").click(function() {
var currentPage = report.pages() || 1;

report
.pages(--currentPage)
.run()
.fail(function(err) { alert(err); });
});

$("#nextPage").click(function() {
var currentPage = report.pages() || 1;

report
.pages(++currentPage)
.run()
.fail(function(err) { alert(err); });
});

// Implement spinner w/cancel button
button.click(function () {
report
.cancel()
.then(function () {
spinner.hide();
alert("Report Canceled!");
})
.fail(function () {
alert("Can't Cancel Report");
});
});

//show error
function handleError(err)
{
var errmsg = err.message;
if (err.errorCode == "unexpected.error")
{
errmsg = "HTTP " + err.xmlHttpRequest.status + ": " + err.xmlHttpRequest.statusText;
}

alert( errmsg );
}
});