Foren

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

Miroslav Bimbo, geändert vor 9 Jahren.

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

New Member Beiträge: 6 Beitrittsdatum: 25.10.13 Neueste Beiträge
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 emoticon )

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, geändert vor 9 Jahren.

RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n

New Member Beiträge: 6 Beitrittsdatum: 28.05.13 Neueste Beiträge
Thank you very much! I was stumbling upon the same problem.
A dev-commentary inside the file would have been nice.
Duncan Watson, geändert vor 9 Jahren.

RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n

New Member Beitrag: 1 Beitrittsdatum: 08.07.14 Neueste Beiträge
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.
thumbnail
Bradley Wood, geändert vor 9 Jahren.

RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n

New Member Beiträge: 3 Beitrittsdatum: 29.07.14 Neueste Beiträge
I ran into the same issue, my solution was to remove the css classes of modify and sort-pages from the navigation
thumbnail
Dilip H Chauhan, geändert vor 6 Jahren.

RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n

New Member Beiträge: 10 Beitrittsdatum: 23.02.11 Neueste Beiträge
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.
thumbnail
Ali Mohamed Siam, geändert vor 9 Jahren.

RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n

New Member Beiträge: 14 Beitrittsdatum: 16.03.14 Neueste Beiträge
Thanks, Miroslav Bimbo
thumbnail
Shalinee Tawar, geändert vor 8 Jahren.

RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n

New Member Beiträge: 5 Beitrittsdatum: 06.02.15 Neueste Beiträge
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, geändert vor 8 Jahren.

RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n

New Member Beiträge: 5 Beitrittsdatum: 08.09.15 Neueste Beiträge
Awesome !!
You saved my life !!!
thumbnail
Quang Anh Ngô, geändert vor 7 Jahren.

RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n

New Member Beiträge: 4 Beitrittsdatum: 19.09.12 Neueste Beiträge
Same error with "_styled" parent theme.

Thank u. I have to sign in to vote!