Power List Menu with many lazy loading nodes adds hundreds of header attributes

**godeny** · 09-17-2016, 08:13 PM

1) Script Title: Power List Menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/powerlistmenu.htm

3) Describe problem: I have a huge menu structure (above 10000 nodes), the top level is defined in the html code, all other submenus are lazy-loaded. (A single menu page has 2-60 child nodes). It means, on the top level, and on other levels too there are several lazy-loaded child nodes.
Moving around in the menu tree i noticed, that the reaction slowed down. Looking into the resulting HTML with Firebug i saw, that all top level lazy-loading nodes got several "headerx" class attributes (the numbers counting up) - the maximum i saw was above 400 attributes for each top level lazy-loading nodes, and also the right arrow behind the text ( <span class="right fa fa-angle-right"></span> ) was multiple times inserted after each node text. Such multiple class attributes and right arrows were also in lower level menus, when since their opening other submenu were opened too.

I am sorry, but the lazy loading pages are delivered by a dynamic server code, and it is running at the moment only on my own computer, so i cannot give you the environement causing the problem, but i hope placing several lazy loading nodes near each other in the same submenu, and also into the lower level submenus one can reproduce the error.

Here the Firebug screen:

Click image for larger version.

Name: Image2.jpg
Views: 324
Size: 19.2 KB
ID: 5948

**godeny** · 09-18-2016, 06:21 AM

I've posted it in normal size (876 x 549), i guess the forum software resized it.

I copy-paste the text from firebug here. It is not so nice (no icons, no coloring), but the information is there.
It is only a part of the content, but you can see the problem.

HTML Code:

<body style="margin:0;">
<div style="width: 100%; overflow: hidden;">
<nav id="mnu1" class="powerlistmenu" style="width: 230px; float: left; height: 53px;">
<div class="drawer" style="left: -100%; z-index: 1009;">
<ul>
<li class="header header0">
<li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/0">
<a href="#">
Hungary
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
</a>
</li>
<li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/1">
<a href="#">
Germany
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
</a>
</li>
<li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/2">
<a href="#">
Switzerland
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
<span class="right fa fa-angle-right"></span>
</a>
</li>
<li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/3">
<li class="header header1 header2 header3">
<li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/5">
<li class="header header1 header2 header3 header4 header5 header6" data-lazyload="/plm/6">

**ddadmin** · 09-18-2016, 04:28 PM

Hmm it's hard to tell much from the code you posted (all I can see is that it's polluted), though based on your initial description it sounds like the script may be fetching and building the dynamic menus multiple times (instead of just once for each external file (ie: /plm/2). A couple of things:

1) Make sure the markup for your entire menu (initially and after a sub menu is fetched and injected) is valid. A missing closing tag for example may lead to the erratic behavior observed).

2) We need to see a demo of the issue you're talking about in order to pinpoint the problem. If you could create a stripped down, minimal version of the menu with the issues intact and post it on codepen.io for example, that wound really help.

**jscheuer1** · 09-18-2016, 07:10 PM

Originally Posted by ddadmin

Hmm it's hard to tell much from the code you posted (all I can see is that it's polluted), though based on your initial description it sounds like the script may be fetching and building the dynamic menus multiple times (instead of just once for each external file (ie: /plm/2). A couple of things:

1) Make sure the markup for your entire menu (initially and after a sub menu is fetched and injected) is valid. A missing closing tag for example may lead to the erratic behavior observed).

2) We need to see a demo of the issue you're talking about in order to pinpoint the problem. If you could create a stripped down, minimal version of the menu with the issues intact and post it on codepen.io for example, that wound really help.

One thing that just occurred to me is that you might be initializing the menu more than once. DD Admin's ideas are also important to go over. And, like he says, without seeing the demo we really have little chance of pinpointing the issue(s). Is there any chance you could publish it (or at least enough of it to see the problem in action) somewhere we could have a look at it?

**godeny** · 09-18-2016, 08:30 PM

I had no luck with codepen.io, so i uploaded a stripped-down example to http://traffic.pxtr.de/tmp/pc4.htm . Selecting the different country names after each other, and returning to the top level already causes the problem, you do not need to dive deeper into the menu structure.

**ddadmin** · 09-20-2016, 05:58 AM

Ok, I've confirmed there is a bug with the script when it comes to the "lazy-load" option. Try the following updated .js file and let me know if it fixes the issue.