How to load different reports to viewer?

Migrateduser

<p>Hello,</p>
<p> </p>
<p>I'm trying to run one report with different report parameters by JSAPI.</p>
<p> </p>
<p>For test purposes I created two buttons. One button is calling the report with parameter "US" and the other button is calling the report with parameter "NG". Additionaly the report will be displayed in an modal window popup.</p>
<p> </p>
<p>This works exactly once no matter what button I click first. The second time nothing happens. When I reload the site it starts again.</p>
<p> </p>
<p>How can I display different reports or same reports with different parameters in one viewer?</p>
<pre class="_prettyXprint _lang-js">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">x</span>
<div id='inlineViewer' class="modal-content"/>
</div>

<button id="myBtnUS">Open Modal US</button>
<button id="myBtnNG">Open Modal NG</button>

<script type="text/javascript" language="JavaScript" src="http://localhost:8700/iportal/jsapi"></script>
<script type="text/javascript" language="JavaScript">


// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btnUS = document.getElementById("myBtnUS");
var btnNG = document.getElementById("myBtnNG");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btnUS.onclick = function() {
modal.style.display = "block";
initJSAPI('US');
}

btnNG.onclick = function() {
modal.style.display = "block";
initJSAPI('NG');
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
document.getElementById('inlineViewer').innerHTML = "";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
document.getElementById('inlineViewer').innerHTML = "";
}
}


var paramValue;

function initJSAPI(countryIsoName) {
paramValue=countryIsoName;
actuate.load("viewer");
var reqOps = new actuate.RequestOptions();
if(!initDone){
initDone=true;
actuate.authenticate("http://localhost:8700/iportal/", null, "xxxxx", "yyyyyy", null, null, null);
}
actuate.initialize("http://localhost:8700/iportal/", reqOps, null, null, runReport);
}

function runReport() {
var viewer = new actuate.Viewer("inlineViewer");

viewer.setParameters({ CountryIso:paramValue});

var viewerwidth = 260;
var viewerheight = 200;
viewer.setWidth(viewerwidth);
viewer.setHeight(viewerheight);

adjustUIOptions(viewer);

viewer.setReportName("/Public/CountryChart.rptdesign");
viewer.submit(submitCallback);
}

function adjustUIOptions(viewer){
var uioptions = new actuate.viewer.UIOptions( );
uioptions.enableToolBar(false);
viewer.setUIOptions(uioptions);
}

function submitCallback(){

}
</script>
</pre>
<p>Thanks for any help</p>
<p> </p>
<p>Benjamin</p>