JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript " src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js "></script>
<div id="container ">Embedded a Sample Report</div>
<select id="stateselector"></select>
<select id="storeidselector"></select>
<div id="testreport"></div>
JavaScript
visualize({
auth: {
name: "joeuser",
password: "joeuser",
organization: "organization_1"
}
}, function (v) {
var inputControls = v.inputControls({
resource: "/public/MyReports/Test1",
params:{"ip_state":["WA"]},
success: renderInputControls
});
var report = v.report({
resource: "/public/MyReports/Test1",
container: "#testreport",
params: {
"ip_state":["WA"],
"ip_storeid": ["17"]
},
error: handleError
});
$("#stateselector").on("change", function () {
inputControls.params({
"ip_state":[$(this).val()]
}).run(function (data)
{renderInputControlStoreID(data);}
);
});
$("#storeidselector").on("change", function () {
report.params({
"ip_state":[$("#stateselector").val()],
"ip_storeid": [$(this).val()]
}).run();
});
//show error
function handleError(err) {
alert(err.message);
}
});
function renderInputControls(data) {
renderInputControlState(data);
renderInputControlStoreID(data);
}
function renderInputControlState(data) {
var stateInputControl = _.findWhere(data, {
id: "ip_state"
});
var select = $("#stateselector");
_.each(stateInputControl.state.options, function (option) {
select.append("<option " + (option.selected ? "selected" : "") + " value='" + option.value + "'>" + option.label + "</option>");
});
}
function renderInputControlStoreID(data) {
var storeidInputControl = _.findWhere(data, {
id: "ip_storeid"
});
var select = $("#storeidselector").empty();
_.each(storeidInputControl.state.options, function (option) {
select.append("<option " + (option.selected ? "selected" : "") + " value='" + option.value + "'>" + option.label + "</option>");
});
}