jQuery not available in raw HTML directive

[mgeier]

I would like to use jQuery in raw HTML blocks, for example

.. raw:: html

    <div id="mydiv"></div>
    <script type="text/javascript">
    var element = $('#mydiv');
    var text = document.createTextNode("Hello JavaScript!");
    element.append(text);
    </script>

This works nicely with the Sphinx default theme and all other themes I tried, except in the RTD theme, where it gives this error:

ReferenceError: $ is not defined

I assume this is because jQuery is loaded in the end of the HTML page, where it was moved to in #78.

Is there a way to move jQuery back up again?

Or is there a work-around available?

My actual use case is allowing JavaScript output in pages converted from Jupyter notebooks, see spatialaudio/nbsphinx#62. JavaScript outputs in Jupyter notebooks assume that jQuery is available, see http://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html#IPython.display.Javascript.

[mgeier]

Ping?

[Blendify]

@agjohnson

[astrojuanlu]

I wanted to add require.js in my resulting docs putting this in conf.py:

def setup(app):
    app.add_javascript('https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js')

However, as it is being loaded at the end of the page, my cells cannot benefit from it.

I know nothing about modern web frontend, but perhaps loading the scripts asynchronously at the top of the page would help? https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

[Blendify]

This should be fixed by #467

[mgeier]

#467 was closed without merging. Is there another way this issue could be solved?

[jessetan]

@mgeier this will be fixed by #545, but that is still open pending functionality and performance testing to be done with a larger set of documentation.

[davidfischer]

The issue is that jQuery is loaded in the document footer rather than in the header. This means it isn't loaded when your raw directive is executed. To workaround this, you could do something like:

.. raw:: html

    <div id="mydiv"></div>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) { 
      var element = $('#mydiv');
      var text = document.createTextNode("Hello JavaScript!");
      element.append(text);
    });
    </script>

[mgeier]

Thanks @jessetan, #545 is good news!

@davidfischer The point is that every other theme has jQuery available at that point, the RTD theme seems to be the only exception (until #545 is done).
I'm not actually writing this code (it was just an example), the code might come from some (Jupyter) extension (e.g. for plotting or whatever) which just assumes jQuery is available.

[jessetan]

Do you have an example in the wild of Jupyter or something similar that expects jQuery to be available? I assumed any large JS project that is concerned about performance expects to be loaded at the end of body.

Inline scripts using .. raw:: can be changed as suggested above, although I feel inserting raw HTML is nasty and hard to maintain.

[mgeier]

Do you have an example in the wild of Jupyter or something similar that expects jQuery to be available?

I know of one concrete bug report (issued in different projects): spatialaudio/nbsphinx#128, poliastro/poliastro#281, readthedocs/readthedocs.org#4367

Apart from that, I think it just makes sense that the RTD Sphinx theme tries to have similar features as other popular themes always had.

[astrojuanlu]

As @mgeier says, one such extension is Plotly:

plotly/plotly.py#1033

I said in #545 that I would provide a minimal example to reproduce but I didn't do it yet.

[astrojuanlu]

Some more info in readthedocs/readthedocs.org#4367 (comment)