How to render the results of the visualize.js api resourcesSearch to a <li> elements inside a menu

mounir.youssef · May 9, 2018

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=true&logLevel=debug&baseUrl=http://localhost:8082/jasperserver-pro">
</script>

</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>

   
   <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

narcism · May 10, 2018

What do you expect to happen when you click on a menu item?

mounir.youssef · May 10, 2018

Hi, i expect to load the report into the DIV id "Placeholder".

narcism · May 10, 2018

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>

Sign In

How to render the results of the visualize.js api resourcesSearch to a <li> elements inside a menu

Recommended Posts

mounir.youssef

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

narcism

Link to comment

Share on other sites

mounir.youssef

Link to comment

Share on other sites

narcism

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Activity

Products

Explore