How to link HTML Element with Python function in Jupyter notebook?

Question

I've written JavaScript code that shows a custom right click menu.

I'd like to know how to trigger Python functions upon my menu items being clicked. These menu items are the divs nested under the div with the class of menu, which consequently is the only element in the body section of my HTML.

The environment I'm using is Jupyter Notebook. notebook.

import jinja2
from bokeh.embed import components

template = jinja2.Template("""
<!doctype html>

<html>
    <head>
        <script>
            src="http://cdn.pydata.org/bokeh/dev/bokeh-0.13.0.min.js"
            var menuDisplayed = false;
            var menuBox = null;
           
            window.addEventListener("contextmenu", function() {
                var left = arguments[0].clientX;
                var top = arguments[0].clientY;
               
                menuBox = window.document.querySelector(".menu");
                menuBox.style.left = left + "px";
                menuBox.style.top = top + "px";
                menuBox.style.display = "block";
               
                arguments[0].preventDefault();
               
                menuDisplayed = true;
            }, false);
           
            window.addEventListener("click", function() {
                if(menuDisplayed == true){
                    menuBox.style.display = "none";
                }
            }, true);
        </script>
        <style>
            .menu
            {
                width: 150px;
                box-shadow: 3px 3px 5px #888888;
                border-style: solid;
                border-width: 1px;
                border-color: grey;
                border-radius: 2px;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 3px;
                padding-bottom: 3px;
                position: fixed;
                display: none;
            }
           
            .menu-item
            {
                height: 20px;
            }
           
            .menu-item:hover
            {
                background-color: #6CB5FF;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="menu">
            <div class="menu-item">Add Node</div>
            <div class="menu-item">Delete Node</div>
            <div class="menu-item">Update Node</div>
        </div>
    </body>
</html>
""")

xoxocoder · Accepted Answer · 2020-07-17 04:39:31Z

1

I think you will get clear understanding and clarity on this with below example easily:

// %%javascript
window.executePython = function(python) {
    return new Promise((resolve, reject) => {
        var callbacks = {
            iopub: {
                output: (data) => resolve(data.content.text.trim())
            }
        };
        Jupyter.notebook.kernel.execute(`print(${python})`, callbacks);    
    });
}



// Use it in any Jupyter JS/HTML cell like this
%%javascript
window.executePython("1 + 1")
    .then(result => console.log(result)); // Logs 2

// You can access any defined object/method in the notebook
// I suggest writing a function that returns your data as JSON and just calling the function.

edited Jul 17, 2020 at 4:39

answered Jul 17, 2020 at 4:30

xoxocoder

3243 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shubham Shekhar Over a year ago

Can you @ihimanshu please tell how to add your code in my JS and will this also works if I will click on my custom menu?

Collectives™ on Stack Overflow

How to link HTML Element with Python function in Jupyter notebook?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related