Hi, i m trying to render the list of reports retrieved from resourcesSearch function into a menu that i cretaed dynamically. the lsit is populated correctly. however, when i click on the li seems that the uri is not correct. and always refers to localhost:8080 instead of the jasperserver url
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Reporting Menu - Vertical Menu Sample</title>
<script type='text/javascript' src="../resources/scripts/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="../resources/jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../resources/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../resources/jqwidgets/jqxmenu.js"></script>
<script type='text/javascript'
src="http://auditpreprod:8082/jasperserver-pro/client/visualize.js?logEnabled...">
</script>
<!--Provide container to render your visualization-->
</head>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
// Create a jqxMenu
$("#jqxMenu").jqxMenu({ width: '300', mode: 'vertical'});
});
</script>
<div id='jqxWidget'>
<div id='jqxMenu' class="jqxMenu">
<ul>
<li id ='mainmenuid'>Reporting </li>
<li id ='requestmenuid'>Request Managments
<ul id ='ulrequestmenuid'> </ul>
</li>
</ul>
</div>
</div>
</div>
<body>
<!--Provide a container to render your visualization-->
<div id="placeholder"></div>
</body>
<script>
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
v.resourcesSearch({
folderUri: "/public",
recursive: true,
types: ["reportUnit","dashboard"],
success: renderResults,
error: handleError
});
// utility function
function renderResults(results) {
var $dropdown = $("#selected_resource");
var $submenu = $("#ulrequestmenuid");
$("#submenu").html("");
//console.info(results);
$.each(results, function(i,item) {
//console.info("uri"+ item.uri);
//console.info("label"+item.label);
//$dropdown.append($("<option />").val(item.uri).text(item.label));
$submenu.append('<li ><a href="'+item.uri+'">'+item.label+'</a></li>');
//$submenu.append('<li ><a href="#">'+item.label+'</a></li>');
});
}
$(document).on('click', $('#jqxMenu li') , function(event) {
// the container was desappeared so i had to recreate it
if ( $("#placeholder").length ==0) {
$("<div>").attr({
'id': "placeholder"
}).appendTo("body");
$("#placeholder").html("");
}
console.info(" hello " + event.target.href);
//render report from another resource
v("#placeholder").report({
resource: event.target.href,
error:handleError
});
});
//enable report chooser
//$(':disabled').prop('disabled', false);
//show error
function handleError(err){
alert(err.message);
};
});
</script>
</html>
please advise
Mounir Youssef
1 Answer:
You need to:
1. Delay the jqxMenu creation until all the submenu items are in the DOM
2. Store the item.uri in a different location
Something like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Reporting Menu - Vertical Menu Sample</title>
<script type='text/javascript' src="../resources/scripts/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="../resources/jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../resources/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../resources/jqwidgets/jqxmenu.js"></script>
<script type='text/javascript' src="http://auditpreprod:8082/jasperserver-pro/client/visualize.js?logEnabled..."></script>
</head>
<body>
<div id='content'>
<div id='jqxWidget' style="display: none;">
<div id='jqxMenu' class="jqxMenu">
<ul>
<li id ='mainmenuid'>Reporting </li>
<li id ='requestmenuid'>Request Managments
<ul id ='ulrequestmenuid'></ul>
</li>
</ul>
</div>
</div>
</div>
<div id="placeholder"></div>
<script>
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
v.resourcesSearch({
folderUri: "/public",
recursive: true,
types: ["reportUnit","dashboard"],
success: renderResults,
error: handleError
});
// utility function
function renderResults(results) {
var $submenu = $("#ulrequestmenuid");
$submenu.html("");
$.each(results, function (i, item) {
$submenu.append('<li><span data-uri="' + item.uri + '">'+ item.label+'</span></li>');
});
$("#jqxMenu").jqxMenu({ width: '300', mode: 'vertical'});
$("#jqxWidget").show();
}
$("#ulrequestmenuid").on("click", "span", function(evt) {
var resourceUri = $(this).data("uri");
v("#placeholder").report({
resource: resourceUri,
error:handleError
});
});
function handleError(err){
alert(err.message);
};
});
</script>
</body>
</html>
What do you expect to happen when you click on a menu item?
Hi, i expect to load the report into the DIV id "Placeholder".