Javascript Error: Can't find variable: $

I’m currently having an issue when trying to render in Jupyter notebooks running on BinderHub. In particular, it’s having difficulty rendering Javascript that uses $/acceses jQuery.

Here’s an example:

from IPython.core.display import display, HTML, Javascript

javascript = """
$.when(
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.6.2/skins/default.js"),
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.6.2/wavedrom.min.js"),
$.Deferred(function( deferred ){
    $( deferred.resolve );
})).done(function(){
    WaveDrom.ProcessAll();
});
"""

html = """
<script type="WaveDrom">
{
  signal : [
    { name: "counter",  wave: "===============", data: ["0x0", "0x1", "0x2", "0x3", "0x4", "0x5", "0x6", "0x7", "0x0", "0x1", "0x2", "0x3", "0x4", "0x5", "0x6"] },
  ],
  config: { hscale: 1 }
}
</script>
"""

display(HTML(html))
display(Javascript(javascript))

When I run it on mybinder.org, I get the following error:
Javascript Error: Can't find variable: $

However, when I run a Jupyter notebook via a Conda environment, it renders correctly:

This was working last I checked (which was several months ago). Was access to jQuery recently changed? I haven’t been able to see any obvious change in Github or anyone else mentioning this issue. I’m not sure if this a Jupyter issue or a BinderHub issue.

One more note:
If I instead just try to render HTML by putting those Javascript commands into <script> tags, it does render well:

from IPython.core.display import display, HTML, Javascript

htmlstring = """
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/2.6.8/skins/default.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/2.6.8/wavedrom.min.js"></script>
<script type="WaveDrom">
{
  signal : [
    { name: "counter",  wave: "===============", data: ["0x0", "0x1", "0x2", "0x3", "0x4", "0x5", "0x6", "0x7", "0x0", "0x1", "0x2", "0x3", "0x4", "0x5", "0x6"] },
  ],
  config: { hscale: 1 }
}
</script>
<script>WaveDrom.ProcessAll();</script>
"""

display(HTML(htmlstring))

Thank you

Not sure what you mean by Jupyter notebook via Conda environment? Your screenshot doesn’t let us know if it is Jupyter classic notebook or JupyterLab?

Seems to work at in sessions launched from where you linked to without the javascript error in the classic interface, but I note you have to run the cell twice:

See this post and thread if you are unaware how to control what interface gets launched and for mentions of how to switch between them. Apparently, at present clicking the Jupyter icon in the upper left goes back to JupyterLab, so you can go both directions without touching the URL or address bar. I don’t think that is expected behavior by users of the classic interface but for right now that is what happens. That logo used to go to the Jupyter Dashboard, and is what I’d prefer it eventually be changed back to.

1 Like

Thanks for the response.

Not sure what you mean by Jupyter notebook via Conda environment? Your screenshot doesn’t let us know if it is Jupyter classic notebook or JupyterLab?

Sorry, what I should have said was that I see it working when I launch the Anaconda-Navigator on my machine, then select “Jupyter Notebook”. I wasn’t aware there was a difference between that and Jupyter Lab, and I just saw that when I try running it locally in “JupyterLab”, it also fails with the Javascript error. So it appears that the issue is with “JupyterLab”, i.e. the classic Jupyter notebook works fine when I use it either on mybinder or locally launched from the Anaconda Navigator.

Seems to work at in sessions launched from where you linked to without the javascript error in the classic interface, but I note you have to run the cell twice:

Okay, thank you. When I run it via a classic notebook on mybinder, it works like you describe. I also note that I can click on the Jupyter icon in the upper left to get to the JupyterLab version like you say, and by going to “Help > Launch Classic Notebook” (or changing the url) I can go to the classic version.

You can also launch a session straight into the tree directory page or open a notebook in the classic mode. In case that wasn’t clear. There were examples of that on that thread I pointed at.