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

[Miroslav Bimbo, modificado 9 Anos atrás.]

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?

[Sebastian Glathe, modificado 9 Anos atrás.]

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

[Duncan Watson, modificado 9 Anos atrás.]

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.

[Bradley Wood, modificado 9 Anos atrás.]

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

[Dilip H Chauhan, modificado 6 Anos atrás.]

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.

[Ali Mohamed Siam, modificado 9 Anos atrás.]

Thanks, Miroslav Bimbo

[Shalinee Tawar, modificado 8 Anos atrás.]

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.

[Jose Miguel Loor, modificado 8 Anos atrás.]

Awesome !!
You saved my life !!!

[Quang Anh Ngô, modificado 7 Anos atrás.]

Same error with "_styled" parent theme.

Thank u. I have to sign in to vote!