JSFiddle - React, Tailwind, and code Playground

by juliia13

HTML

<!--Provide visualize.js from your jasperreport server-->
<script src='http://localhost:8080/jasperserver-pro/client/visualize.js'></script>

<!--Provide container to render your visualization-->
<div id='description'>

<p>Select chart type</p>
<select id='ChartType'></select> 

<br> <br>

<div id='error'></div>

<input type='submit' id='apply' value='Apply'> 

<button id="ok" hidden>OK</button>
<br>
<br>
</div>
<div id="container"></div>

CSS

#container {
    border: 1px solid black;
}
button {
  width:100px;
  height: 20px;
}
#error {
  color:red;
}

JavaScript

var components;
visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin"
    }
}, function (v) {

    
    var report = v.report({ 
        resource: "/public/Samples/Reports/ProfitDetailReport",
        
       
                    
        error: handleError, 
        
        success:function(data){  
             
          
               
                 components = report.data().components;
              
               console.log(components);
         
                  
            for (var i=0; i < v.report.chart.types.length; i++){
  $('#ChartType').append ( '<option>' +   v.report.chart.types[i] + ' </option>')
                 
   };
        },
        
        container: "#container" 
        
    });
    
  
    
   // console.log(v.report.chart.types)
   $('#apply').on("click", function () {
   

  
    
//console.log(components[0].id);
            report.updateComponent(  {
            
                chartType: $('#ChartType').val()
                }).fail(handleError);
                });
                
   
   
    
    function handleError(err) {
    $('#apply').hide();
    $("#ok").show();
    
    $('#error').append('<p>Error message: ' + err.message + ' </p>')
    $('#error').append('<p>Status: ' + err.xmlHttpRequest.status + ' ' + err.xmlHttpRequest.statusText + ' </p>')
    console.log(err);
    
       
    }
    
     $('#ok').on("click", function () {
           $('#error').empty();
             $('#apply').show();
             $("#ok").hide();
           
     })
    

});