// Visualize: Bind input control to report (5.6)
var reportUri = "/public/Samples/Reports/Cascading_Report_2_Updated";
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
var inputControls = v.inputControls({
resource: reportUri,
success: renderInputControls
});
var report = v.report({ resource: reportUri, container: "#container" });
$("#productFamilySelector").on("change", function() {
report.params({ "Product_Family": [$(this).val()] }).run();
});
});
function renderInputControls(data) {
var productFamilyInputControl = _.findWhere(data, {id: "Product_Family"});
var select = $("#productFamilySelector");
_.each(productFamilyInputControl.state.options, function(option) {
select.append( "<option " + (option.selected ? "selected" : "")
+ " value='" + option.value + "'>" + option.label + "</option>");
});
}
<!-- Visualize: Bind input control to report (5.6)
-->
<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type='text/javascript' src="http://underscorejs.org/underscore-min.js"></script>
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<select id="productFamilySelector"></select>
<div id="container"></div>
External resources loaded into this fiddle: