Visualize: render input controls
All types
by Pavel Savushchyk
HTML
<script type='text/javascript' src="http://localhost:8080/jrs3/client/visualize.js?_opt=true"></script>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<button id="validate">
Validate
</button>
<button id="getParams">
Get Params
</button>
<button id="ApplyFilter">
Apply Filter
</button>
<div id="containerInput" style="width:300px"></div>
<div id="reportContainer" ></div>
JavaScript
var inputControls="";
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function(v) {
inputControls= v.inputControls({
resource: "/public/Samples/Reports/Cascading_Report_2_Updated",
container: "#containerInput",
error: function(err) {
console.error(err);
},
success: function(data) {
console.log(data)
}
});
$("#validate").click(
function(){
inputControls.run().fail(function(data) {
console.log(data);
alert("One or more controls invalid: \n" + JSON.stringify(data.parameters));
});
}
);
$("#getParams").click(
function(){
console.log(inputControls.data().parameters)
}
);
$("#ApplyFilter").click(function(){
var paramm=inputControls.params();
inputControls.run().fail(function(data) {
console.log(data);
alert("One or more controls invalid: \n" + JSON.stringify(data.parameters));
}).done(function() {
v.report({
resource: "/public/Samples/Reports/Cascading_Report_2_Updated",
container: "#reportContainer",
params:inputControls.data().parameters,
error: function(err) {
console.error(err);
},
success: function(data) {
console.log(data)
}
});
});
});
});