Menu Active Item Not Auto Updating
Hello
I'm trying to get the active menu to update however receive the following error:
admin2.php:667 Path
admin2.php:668 /usersc/admin2.php
scripts.bundle.js:2547
Uncaught TypeError: Cannot read properties of undefined (reading "closest")
at _getItemParentElement (scripts.bundle.js:2547:24)
at _getItemParentElements (scripts.bundle.js:2568:22)
at _setActiveLink (scripts.bundle.js:2860:27)
at KTMenu.the.setActiveLink (scripts.bundle.js:3019:16)
at KTMenu.updateByLinkAttribute (scripts.bundle.js:3270:26)
at HTMLDocument.<anonymous> (admin2.php:669:9)
_getItemParentElement @ scripts.bundle.js:2547
_getItemParentElements @ scripts.bundle.js:2568
_setActiveLink @ scripts.bundle.js:2860
KTMenu.the.setActiveLink @ scripts.bundle.js:3019
KTMenu.updateByLinkAttribute @ scripts.bundle.js:3270
(anonymous) @ admin2.php:669Here is the HTML block, note I have included the globally required files.
<!--begin:Menu item-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="/usersc/admin2.php">
<span class="menu-icon">
<!--begin::Svg Icon | path: /icons/duotune/general/gen062.svg-->
<span class="svg-icon svg-icon-2">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.34375 3.9463V15.2178C1.34375 16.119 2.08105 16.8563 2.98219 16.8563H8.65093V19.4594H6.15702C5.38853 19.4594 4.75981 19.9617 4.75981 20.5757V21.6921H19.2403V20.5757C19.2403 19.9617 18.6116 19.4594 17.8431 19.4594H15.3492V16.8563H21.0179C21.919 16.8563 22.6562 16.119 22.6562 15.2178V3.9463C22.6562 3.04516 21.9189 2.30786 21.0179 2.30786H2.98219C2.08105 2.30786 1.34375 3.04516 1.34375 3.9463ZM12.9034 9.9016C13.241 9.98792 13.5597 10.1216 13.852 10.2949L15.0393 9.4353L15.9893 10.3853L15.1297 11.5727C15.303 11.865 15.4366 12.1837 15.523 12.5212L16.97 12.7528V13.4089H13.9851C13.9766 12.3198 13.0912 11.4394 12 11.4394C10.9089 11.4394 10.0235 12.3198 10.015 13.4089H7.03006V12.7528L8.47712 12.5211C8.56345 12.1836 8.69703 11.8649 8.87037 11.5727L8.0107 10.3853L8.96078 9.4353L10.148 10.2949C10.4404 10.1215 10.759 9.98788 11.0966 9.9016L11.3282 8.45467H12.6718L12.9034 9.9016ZM16.1353 7.93758C15.6779 7.93758 15.3071 7.56681 15.3071 7.1094C15.3071 6.652 15.6779 6.28122 16.1353 6.28122C16.5926 6.28122 16.9634 6.652 16.9634 7.1094C16.9634 7.56681 16.5926 7.93758 16.1353 7.93758ZM2.71385 14.0964V3.90518C2.71385 3.78023 2.81612 3.67796 2.94107 3.67796H21.0589C21.1839 3.67796 21.2861 3.78023 21.2861 3.90518V14.0964C15.0954 14.0964 8.90462 14.0964 2.71385 14.0964Z" fill="currentColor"/>
</svg>
</span>
<!--end::Svg Icon-->
</span>
<span class="menu-title">Dashboard 2</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-->This is the script:
<script>
KTUtil.onDOMContentLoaded(function() {
console.log("Path");
console.log(window.location.pathname);
KTMenu.updateByLinkAttribute(window.location.pathname);
});
</script>Replies (9)
Hi,
In real-world applications, the menu's active state is set during the HTML code generation by adding required active classes for the related menu item. Setting the menu active link using JS may not be the best solution since users may notice a delay after loading the page up to executing the js code to set the menu. For more info please check this inner page template here where menu active link markup can be clearly seen how it's set:
If you still link to proceed with the JS way of setting the menu active links please note the above js error occurred due to unknown URL param you passed to the function. However, the JS error can be fixed by modifying the _getItemParentElement function in src/js/components/menu.js as shown below:
if ( sub && KTUtil.data(sub).has("item") ) {
return KTUtil.data(sub).get("item");
}Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Then try to use a real URL string for testing:
KTMenu.updateByLinkAttribute("real url");If it works as expected then you can pass
window.location.pathname. If the issue still persists
Regards,
Sean
Thanks Sean,
If the active state is set in html, wouldn't that mean a static menu on each page, so if one link changes, every page needs an update?
I tried the amendment however received the same error. The code does work fine if (using the same url that fails) the item is a sub item, under Dashboards for instance. The example I tried to copy was the Layout builder link here (as this doesn't have a parent):
https://preview.keenthemes.com/metronic8/demo1/layout-builder.html
Should the js work for that as it is or does it need something extra?
Many thanks for your support.
Hi,
You can set conditions for each link and set the active set if the URL matches.
<div class="menu-item <?PHP echo ($_SERVER["REQUEST_URI"] === "/usersc/admin2.php") ? "active" : "")?>">
<a class="menu-link" href="/usersc/admin2.php"></a>
</div>
<div class="menu-item <?PHP echo ( $_SERVER["REQUEST_URI"] === "/usersc/admin3.php") ? "active" : "")?>">
<a class="menu-link" href="/usersc/admin3.php"></a>
</div>Regards.
Thanks Sean, this works for the non-sub menu item now, although note the existing code does error in the console as before. var sub = item.closest('.menu-sub'); (RED X HERE)<pre lang="scss">
It's this line where there is a little red x at the end when pressing the first link in the console for the error, which as you mentioned before goes to the _getItemParentElement:
I suppose I would need a multiple "ifs" for URLs within a sub section to add the show to the parent rather than using KTMenu to suppress this error although do prefer this?
Unless it's something simple with the existing code.
Hi,
Basically, the menu rendering in the backend is quite simple, you just need to determine the active page's menu and its parents and just apply the required classes as per the original template markup.
Could you please share your test URL via private reply and we will have a look? If the menu structure is correct and all required classes are there then the JS error should it happen.
Regards.
