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

0

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 

 

 

 

mounir.youssef's picture
Joined: Feb 16 2018 - 3:59am
Last seen: 9 months 5 days ago

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

narcism - 1 year 6 months ago

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

mounir.youssef - 1 year 6 months ago

1 Answer:

0

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>

narcism's picture
1096
Joined: Nov 22 2010 - 12:39am
Last seen: 11 min 32 sec ago
Feedback