search

mootools / mootools-core

MooTools Core Repository
https://mootools.net
2.65k stars 505 forks source link

document.id() conflicts with jQuery #2784

Closed bamyasi closed 7 years ago

bamyasi commented 7 years ago

Hi,

On my site, I am using mootools-core v1.6.0, as well as JSmol molecular structure viewer, which in turn uses jQuery. Pages load JSmol code first, so it's jQuery component would grab the $ definition. However, after JSmol/JQuery is loaded, all calls to document.id('elname') always return null, regardless of the element names passed. If I load non-jQuery version of JSmol instead, then the same document.id() calls work as expected.

SergioCrisostomo commented 7 years ago

@bamyasi can you make a jsFiddle that reproduces this problem?

bamyasi commented 7 years ago

Unfortunately, no. jsFiddle now requires a mandatory use of https for resources URIs and I do not have https configured on our servers. So it does not work.

bamyasi commented 7 years ago

Ok, I was able to create a jsFiddle test snippet by loading JS libraries from external https hosts: https://jsfiddle.net/oz6n3cba/8/

Looks like this simple jsFiddle test works fine. It toggles on/off the display of placeholder string if you click on (invisible, sorry) button located to the left of "3D Visualization" string. This does not depend on the order in which external JS libraries are loaded.

However, this still does not work with my pages. I tried removing temporarily other JS libraries loading, rearranging loading order, etc. Nothing helps, it's always -- TypeError: document.id(...) is null.

Try clicking on any of the "+" buttons to trigger the error here: http://genetics.bwh.harvard.edu/ggi/pph2/54a41688da654151eb4cc1a20a584349692aef0e/4399616.html

On contrast, try properly working toggle block display buttons with the old version of the page here (no JSmol applet): http://genetics.bwh.harvard.edu/ggi/pph2/54a41688da654151eb4cc1a20a584349692aef0e/4399616-orig.html

bamyasi commented 7 years ago

After some more testing, it turns out that removing the actual JSmol embedded Javascript from the page body (while still loading JSmol library in the head section) makes toggle buttons work again.

bamyasi commented 7 years ago

I fixed my code eventually by getting rid of the document.id() calls and reverting to using document.getElementById() instead. Ugly but works. I was unable to find out how exactly JSmol applet initialization screwed up the page, breaking mootools.