Jquery in display function of a python notebook

Notebook
1

Is there a way to run jQuery in a display function called in a python notebook ? I am looking to be able to organize (sort) some div produced and displayed in a notebook.

The static js+html version works. Not from a notebook.

import matplotlib.pyplot as plt
import numpy as np
from IPython.display import HTML, display

width = 300
height = 200
dpi = 100


# Create images
for i in range(5):
    filePNG = 'image_%02d.png' %(i+1)
    fig = plt.figure(figsize=(width/dpi, height/dpi), dpi=dpi)
    plt.plot(np.random.rand(10))
    plt.ylabel('some numbers')
    plt.savefig(filePNG)
    plt.close(fig)

# Display
html_code = '<div id="sortable">\n'
for i in range(5):
    filePNG = 'image_%02d.png' %(i+1)
    html_code += '''
<div style='float: left; border: 1px solid lightgray;'>
    <img style='width: 100%%;' src='%
</div>
''' % (filePNG)
html_code += '</div>'

js_code = '''
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<script>
$( function() {
   $("#sortable").sortable();
});
</script>
 '''

display(HTML(js_code + '<div id="sortable">' + html_code + '</div>'))

As written the same code works from an html page. For info: Sortable | jQuery UI

Is it feasible with a ipywidget output ?

3

Recent jupyer lab release

jupyterlab                4.2.3
ipywidgets                8.1.3
4

I have tried with pure javascript as follows:

js_code = '''
<script>
const plots = document.querySelector('#sortable').querySelectorAll('.plot');
plots.forEach(plot => {
  console.log('plot');
  plot.addEventListener('dblclick', function handleClick(event) {
    plot.remove();
  });
});
</script>
'''

Then from a cell:

HTML(html_code + js_code)

but it does not works (a double click on a plot should remove the div).
It works from an html file.

What am I missing ?

5

I would think you need to wrap the js_code part in IPython,display’s Javascript, like here and here and not wrap it in like you have; however, I couldn’t find a more complex example involving a function to point out. Here has a function defined there but it is using an ipywidget library.

6

Others finding this may be interested in this cross-post here on StackOverflow with responses.

7

Yes, I asked this also there (I hope that’s not a problem).

I still don’t get it. Even with a pure JS.

Try:
https://thredds-su.ipsl.fr/thredds/fileServer/ipsl_thredds/brocksce/tmp/display_js_01.ipynb
→ plots should be sortable

https://thredds-su.ipsl.fr/thredds/fileServer/ipsl_thredds/brocksce/tmp/display_js_02.ipynb
→ a double click should remove a div

Both works in a standalone html file not inside a notebook.
Very strange that you have working versions.

Could someone test those notebooks and give me a feedback ?