JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<div id="container"></div>
<div id="hint" >
<span>Selection: </span>
<strong id='output'></strong>
</div>
CSS
#container {
width:200px;
}
#hint {
display:none
}
JavaScript
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
v.inputControls({
container: "#container",
resource: "/public/Samples/Reports/06g.ProfitDetailReport",
error: function (err) {
alert(err);
},
events: {
change : function(params) {
$("#hint").show();
$("#output").text(params['ProductFamily'].join(', '));
}
}
});
});