Uncaught TypeError: Cannot read property 'length' of undefined - Kibana Dash board

Elastic Stack Kibana
1

I'm rotating dashboards using simple HTML/Js code running on Tomcat. Code is as follows

body, html { height: 100%; overflow: hidden; padding: 0; margin: 0; } 
        .page {
          top: 0; 
          left: 0; 
          width: 100%; 
          min-height: 100%; 
          position: absolute; 
          display: none; 
          overflow: hidden;
          border: 0;
        }

        .currentPage { 
          display: block; 
        }
    </style>
</head>
<body>
    <script>
        var TIME_PER_PAGE = 10000;
        window.onload = function() {
            var pages = document.querySelectorAll('.page'),
                numPages = pages ? pages.length : 0;
                i = -1;

            function nextPage() {
                if (i >= 0)
                    pages[i].classList.remove('currentPage');

                //i++;
                i = (i + 1) % numPages; 
                pages[i].classList.add('currentPage');
               // if (i < numPages - 1)
                  setTimeout(nextPage, TIME_PER_PAGE);
            }
            nextPage();
        }
		
    </script>

<!--star points transactions-->
 <div class="page"><iframe src="http://X.X.X.X:5601/goto/5dc9a151276c66cd77a85dedb61cc344" style="border: 0; width: 100%; height: 100%"></iframe></div>
 
<!--ezCash SMS notifications-->
 <div class="page"><iframe src="http://X.X.X.X:5601/goto/9a87536f45eb55594de98c4e4d697ba6" style="border: 0; width: 100%; height: 100%"></iframe></div>

<!--ezCash transactions-->
 <div class="page"><iframe src="http://X.X.X.X:5601/goto/ecb52d0dcef43530e4a494628efee2e7" style="border: 0; width: 100%; height: 100%"></iframe></div>

<!--ezCash Channels-wise-->
 <div class="page"><iframe src="http://X.X.X.X:5601/goto/c7e5da66601215652cb73205ffbd7b86" style="border: 0; width: 100%; height: 100%"></iframe></div>

<!--ezCash AGENT Transactionss-->
 <div class="page"><iframe src="http://X.X.X.X:5601/goto/83d0bafec5aabdda75c93242182dc922" style="border: 0; width: 100%; height: 100%"></iframe></div>

<!--ezCash WEB agents (IPG) Transactions-->
 <div class="page"><iframe src="http://X.X.X.X:5601/goto/829848db19f4271e0c1cffdd04013172" style="border: 0; width: 100%; height: 100%"></iframe></div>

<!--NFC Bus Ticket Transactions-->
 <div class="page"><iframe src="http://X.X.X.X:5601/goto/7a81e0e68ce3cd739754ba0b589707e0" style="border: 0; width: 100%; height: 100%"></iframe></div>

<!--NFC TopUps-->
 <div class="page"><iframe src="http://X.X.X.X:5601/goto/704bcd00904b5a97b013b1c6105fc68a" style="border: 0; width: 100%; height: 100%"></iframe></div>

<!--NFC FQMS Transactions-->
 <div class="page"><iframe src="http://X.X.X.X:5601/goto/8b82be2bdcb66e1b29717b2c786a013c" style="border: 0; width: 100%; height: 100%"></iframe></div>


  </body>
</html>

But when loading above using Chrome following error appears for some of the dash boards

kibana_error
kibana_error.png1077×607 59.5 KB

Can some one please help me?

Thanks in advance

2

Hi @ruranga,

it is a known effect in some browsers that iframes loaded in invisible container elements are rendered with a width and height of 0, which confuses the dashboards. The common solution for that is to lazily load the iframes when they first become visible. You could, for example, replace the src attribute on your iframes with data-src and copy it over to the src in your javascript when currentPage is first applied.

1 Like
3

Thanks for the help. I will try :+1:

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.