Call javascript from a button click event

JupyterLab
1

I tried to execute a javascript in Jupyter lab,

The following code works in a jupyterlab cell, and I can see the output from my chrome console,
from IPython.display import Javascript
my_js = “”"
console.log(‘hello world!’);
“”"
Javascript(my_js)

but when I move it into a button click event function, nothing shows up in chrome console,
button = widgets.Button(
description=‘Button’,
disabled=False,
button_style=’’,
tooltip=‘Button’,
icon=‘check’
)

def on_button_clicked(b):
my_js = “”"
console.log(‘Hello world2!’);
“”"
Javascript(my_js)

button.on_click(on_button_clicked)

display(button)

Can any expert tell me why and any solution for this ?

Thanks.

2

The reason that the Javascript object runs the JS when you run in a cell is because the kernel displays the result of any unterminated (;) expression in the cell. So, just calling Javascript isn’t enough to execute it; it is the fact that it is the last expression in the cell that means it is executed. If you want to run this sort of code inside a cell, you can call display() and pass in the Javascript object.

3

I have already tried that. Unfortunately, adding “display” won’t solve this issue. It will show up in jupyter log view as "
<IPython.core.display.Javascript object>" instead of executing that javascript in browser.

4

You can use triple back-ticks to embed code:

```
this is some code
```

Now, I believe the reason that a bare display doesn’t work is that the comm message isn’t handled by any particular cell, so only the JupyterLab log console receives it. For whatever reason, this does not execute Javascript display objects. You could solve this by using the HTML display object with a <script> tag instead, or use an Output widget:

from IPython.display import HTML, Javascript
button = widgets.Button(
    description='Button',
    disabled=False,
    button_style='',
    tooltip='Button',
    icon='check'
)
        
output = widgets.Output()

@output.capture(clear_output=True)
def on_button_clicked(b):
    my_js = """
    console.log('hello world!');
    """
    display(Javascript(my_js))

button.on_click(on_button_clicked)
display(button, output)
1 Like
5

Thanks! this works.

I am able to change css with javascript. Here is my test script, and I believe display(button, output) makes it work.

from IPython.display import HTML, Javascript
import ipywidgets as widgets

button = widgets.Button(
description=‘Button’,
disabled=False,
button_style=’’,
tooltip=‘Button’,
icon=‘check’
)

output = widgets.Output()
@output.capture(clear_output=True)
def on_button_clicked(b):
my_js = “”"
console.log(“click called”);
xx = document.getElementsByClassName(“widget-button”);
console.log(xx.length);
xx[3].style.border=“1px solid orange”;
“”"
display(Javascript(my_js))

button.on_click(on_button_clicked)

display(button, output)

My appliation uses sidecar with widget layout. I will test it out. Will let you know how’s going.

Thanks again.

6

I also answered your question on Stack Overflow earlier: python - Call Javascript from a button click event function in Jupyter Lab or Jupyter notebook - Stack Overflow.

1 Like