CODEWITHSUNDEEP
pythonjqueryjupyter-notebookipywidgets
PBrockmann
PBrockmann

Reputation: 429

jQuery in display function of a Python notebook

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 = ''
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='%s' />
                    </div>
                 ''' % (filePNG)
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: https://jqueryui.com/sortable/

Is it feasible with a ipywidget output ?

Upvotes: 2

Views: 58

Answers (1)

user2314737
user2314737

Reputation: 29427

The issue is that you're using the wrong jQuery version. You need to use the same jQuery that the notebook is using (currently 3.5.1) otherwise you are going to end up with two conflicting versions.

You can check the jQuery version in the Jupyter notebook with:

display(Javascript('alert($().jquery)'))

Here's your working code:

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

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 = ''
for i in range(5):
    filePNG = 'image_%02d.png' %(i+1)
    html_code += '''
                    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
                    <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
                    <div style='float: left; border: 1px solid lightgray;'>
                            <img style='width: 100%%;' src='%s' />
                    </div>
                 ''' % (filePNG)

js_code = '''
        $( function() {
            $("#sortable").sortable();
        });
'''
display(HTML('<div id="sortable">' + html_code + '</div>'))
display(Javascript(js_code))

Actually, you don't need to upload any of the jQuery or jQuery-UI libraries since they are already available in the notebook. You can see this with

display(Javascript('alert("jQuery: "+$().jquery + ", jQuery-UI: " + $.ui.version)'))

(I get JQuery: 3.5.1, JQuery-UI: 1.12.1)

So the code will work also if you remove the lines

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>

Upvotes: 0

Related Questions