document.id() conflicts with jQuery

[bamyasi]

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]

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

[bamyasi]

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]

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]

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]

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.