Theme development limitations (JS error: DD.Drop: Invalid Node Given: null)

[9年前 に Miroslav Bimbo によって更新されました。]

At least in LR 6.2.1 there are some limitations in theme development, not documented even a bit....
The reason are Javascript libraries, loaded by Liferay, expecting some structures in themes...

For example, there is basic _unstyled theme modification:
In file navigation.vm, 2nd row is:

if you replace ul to div (yes, I know it's wrong according to HTML, but this is easiest example):

save -> build -> deploy -> load.... browser will write an error:

Error: DD.Drop: Invalid Node Given: null
TypeError: Y.one(...) is null

... and javascript on entire page will stop working properly !

Fortunately after a bit of seraching, I've found a *magic* JS variable called Liferay.Data.NAV_LIST_SELECTOR
(you can see it only in navigation.js and navigation.vm of classic theme )

Modifing my navigation.vm solved problem:

##navigation.vm
<nav class="$nav_css_class" id="navigation" role="navigation">
	<div id="theonlynameofdivinwholeuniverse" aria-label="#language (" site-pages")" role="menubar">
	....
	</div>
</nav>

<script>
	Liferay.Data.NAV_LIST_SELECTOR = '#theonlynameofdivinwholeuniverse';
</script>

Great, it works! It took me just 5 hours to find out reason and solution to my problem.... ... just because of changing one tag....

Well, I would like to say, I am SIGNIFICANTLY missing this kind of documentation: what is allowed and what forbidden to change in templates, in order to keep things working... Which elements, classes, IDs should not be changed according to JS expectations? How to override defaults?

[9年前 に Sebastian Glathe によって更新されました。]

Thank you very much! I was stumbling upon the same problem.
A dev-commentary inside the file would have been nice.

[9年前 に Duncan Watson によって更新されました。]

Thanks so much for that one! Saved us a lot of debugging.

I guess that's the problem with non-intrusive javascript. It's quite often a difficult one to spot when you've accidentally broken it my some innocent change.

[9年前 に Bradley Wood によって更新されました。]

I ran into the same issue, my solution was to remove the css classes of modify and sort-pages from the navigation

[6年前 に Dilip H Chauhan によって更新されました。]

Bradley Wood:

I ran into the same issue, my solution was to remove the css classes of modify and sort-pages from the navigation

Thanks for this solution. I face same problem and got solution using this line.

[9年前 に Ali Mohamed Siam によって更新されました。]

Thanks, Miroslav Bimbo

[8年前 に Shalinee Tawar によって更新されました。]

I had the same issue.
I actually added div tag between <nav> and <ul> in navgation.vm file.

All we have to do is take care of navigation structure same as default and maintain classes that is given by default to all nav, ul and li tags and add custom classes as per the requirements.

[8年前 に Jose Miguel Loor によって更新されました。]

Awesome !!
You saved my life !!!

[7年前 に Quang Anh Ngô によって更新されました。]

Same error with "_styled" parent theme.

Thank u. I have to sign in to vote!