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
