Visualize with tabls

Visualize with tabls

by Pavel Savushchyk

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://infra-platforms-phase2-4485-hgokulak.pfa.jaspersoft.com:8080/jasperserver-pro/client/visualize.js"></script>

<button id="testBtn">
Apply Params 
</button>

<div id="tabs">
  <ul>
    <li data-type="report"><a href="#tabs-1">Reports</a></li>
    <li data-type="control"><a href="#tabs-2">Controls</a></li>
  </ul>
  <div id="tabs-1">
    <div id="report">


    </div>

  </div>
  <div id="tabs-2">
    <div id="controls">


    </div>
  </div>


</div>

JavaScript

$(function() {


  $("#tabs").tabs();

  var __my__viz__ = visualize;
  var my_report, inputControls;

  visualize({
    auth: {
      name: "superuser",
      password: "superuser"
    }
  }, function(v) {

    var _url = "/public/Samples/Reports/Cascading_Report_2_Updated";
    my_report = v.report({
      resource: _url,
      container: "#report",
      error: function(err) {
        console.error(err);
      }
    });


    inputControls = v.inputControls({
      resource: _url,
      container: "#controls",
      error: function(err) {
        console.error(err);
      }
    });


  });


  $("#testBtn").click(function() {
  	$("iframe").remove();
    
    console.log(inputControls.data().parameters);
    my_report
      .params(inputControls.data().parameters)
      .run();

  });


  $("#tabs").on("tabsactivate", function(event, ui) {
    var type = $(ui.newTab[0]).data("type");
    if (type === "report") {
      $("#controls").html("");
      my_report.run();
    } else {
      $("#report").html("");
      inputControls.run();
    }
  });

});