Visualize.js: Render Cascading Input Control with Single and Multi-Select

Render JRS cascading input control which includes both control with a single and multi-select.

by tara5

HTML

<script src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=false"></script>

<div id="containerInput">
  <div><p>Loading...</p></div>
</div>

CSS

#containerInput {
    width: 300px
}

/* You can replace the following with your own custom loading indicator */
@import "compass/css3";

@keyframes fadeIn { 
  from { opacity: 0; } 
}

p {
  position: relative;
  top: 50px;
  
  font: italic bold 1.2em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  
  animation: fadeIn 1s infinite alternate;
}

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var inputControls = v.inputControls({
        resource: "/organizations/organization_1/adhoc/topics/Cascading_multi_select_topic",
        container: "#containerInput",
        params: {
        	'Country_multi_select': [
            {
              name: 'Country_multi_select',
              offset: 0,
              limit: 100,
              value: ['Mexico']
            }
          ]
        },
        success: function() {
            console.log(arguments);
        },
        error: function (err) {
            console.error(err);
        }
    });
});