JSFiddle - React, Tailwind, and code Playground

by Shraddha Tambe

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="http://localhost:8081/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: "jasperadmin",
        password: "jasperadmin",
        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>");
    });
}