Foros de discusión
Theme development limitations (JS error: DD.Drop: Invalid Node Given: null)
Miroslav Bimbo, modificado hace 9 años.
Theme development limitations (JS error: DD.Drop: Invalid Node Given: null)
New Member Mensajes: 6 Fecha de incorporación: 25/10/13 Mensajes recientes
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:
... 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:
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?
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 hace 9 años.
RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n
New Member Mensajes: 6 Fecha de incorporación: 28/05/13 Mensajes recientes
Thank you very much! I was stumbling upon the same problem.
A dev-commentary inside the file would have been nice.
A dev-commentary inside the file would have been nice.
Duncan Watson, modificado hace 9 años.
RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n
New Member Mensaje: 1 Fecha de incorporación: 8/07/14 Mensajes recientes
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.
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 hace 9 años.
RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n
New Member Mensajes: 3 Fecha de incorporación: 29/07/14 Mensajes recientes
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 hace 6 años.
RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n
New Member Mensajes: 10 Fecha de incorporación: 23/02/11 Mensajes recientesBradley 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 hace 9 años.
RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n
New Member Mensajes: 14 Fecha de incorporación: 16/03/14 Mensajes recientes
Thanks, Miroslav Bimbo
Shalinee Tawar, modificado hace 8 años.
RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n
New Member Mensajes: 5 Fecha de incorporación: 6/02/15 Mensajes recientes
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.
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 hace 8 años.
RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n
New Member Mensajes: 5 Fecha de incorporación: 8/09/15 Mensajes recientes
Awesome !!
You saved my life !!!
You saved my life !!!
Quang Anh Ngô, modificado hace 7 años.
RE: Theme development limitations (JS error: DD.Drop: Invalid Node Given: n
New Member Mensajes: 4 Fecha de incorporación: 19/09/12 Mensajes recientes
Same error with "_styled" parent theme.
Thank u. I have to sign in to vote!
Thank u. I have to sign in to vote!