Visualize: render input controls
All types
HTML
<script type='text/javascript' src="http://localhost:8080/jrs3/client/visualize.js?_opt=false"></script>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<button id="validate">
Validate
</button>
<button id="getParams">
Get Params
</button>
<button id="run">
Run
</button>
<button id="reset">
Reset
</button>
<div id="containerInputSingle" style="width:300px; padding: 10px;"></div>
<div id="containerInputMulti" style="width:300px; padding: 10px;"></div>
<div id="containerInput" style="width:300px; padding: 10px;"></div>
JavaScript
var inputControls="";
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function(v) {
inputControls= v.inputControls({
resource: "/public/IC_Singleselect_Report",
container: "#containerInputSingle",
error: function(err) {
console.error(err);
},
success: function(data) {
console.log(data)
}
});
inputControls= v.inputControls({
resource: "
/public/Samples/Reports/Cascading_Report_2_Updated
Read-only values
",
container: "#containerInputMulti",
error: function(err) {
console.error(err);
},
success: function(data) {
console.log(data)
}
});
inputControls= v.inputControls({
resource: "/public/IC_basic_Report",
container: "#containerInput",
error: function(err) {
console.error(err);
},
success: function(data) {
console.log(data)
},
events: {
change: function(data) {
console.log("change: ", data)
}
}
});
$("#validate").click(
function(){
inputControls.validate();
}
);
$("#getParams").click(
function(){
console.log(inputControls.params());
}
);
$("#run").click(
function(){
console.log(inputControls.data().parameters)
inputControls.run(null, function(e) {
console.log(e)
});
}
);
$("#reset").click(
function(){
console.log("Params before reset: ", inputControls.data().parameters)
inputControls.reset(function() {
console.log("Params after: ", inputControls.data().parameters)
}, function(e) {
console.log(e)
});
}
);
});