I am working in jupyter lab env using ipwidgets python library. I am making a dashboard environment using jupyter lab. The problem I am facing is that form some reason javascript is not working at all. I thought it would have been a problem with the environment I am using so I installed a fresh environment in a sandbox but it still does not work.
This is the example code that I am trying to run
from IPython.display import Javascript, display
import ipywidgets as widgets
# Define a function to display a JavaScript alert
def show_alert():
display(Javascript('alert("Hello from JavaScript!")'))
# Create a button widget
button = widgets.Button(description="Click me!")
# Set the button's action
button.on_click(lambda b: show_alert())
# Display the button
display(button)
For testing I run this code in google colab and It is working fine there.
When I run the code and clicke the ‘click me’ button I get the following output in the jupyter console
3
You don’t seem to be using current ways of working with ipywidgets and so it won’t work in modern Jupyter. (At this time, Google Colab is outdated tech in the broader Jupyter ecosystem. Please read the bottom of my answer here if you’d like to know more about the modern Jupyter ecosystem.)
Mainly the code for the button needs fixing and then how you handle linking the ‘output’ here to how you want it handled in current Jupyter.
This should work:
from IPython.display import Javascript, display
import ipywidgets as widgets
out = widgets.Output()
# Define a function to display a JavaScript alert
def show_alert(event):
with out:
display(Javascript('alert("Hello from JavaScript!")'))
# Create a button widget
button = widgets.Button(description="Click me!")
# Set the button's action
button.on_click(show_alert)
# Display the button and the Output widget
display(button, out)
Detailed explanations:
Handling output with ipywidgets:
See here where Jason Grout points out that your use of Javascript there is a generic Jupyter thing you are taking advantage of and nothing to do with ipywidgets. Triggering an alert message box that way would work directly without ipywidgets, but you wrapped it into ipywidgets because you want to trigger it with an ipywidgets button, and so now to direct the handling properly you need to use approaches meant to be used with ipywidgets.
Ideally, you’ll want to use JupyterLab to troubleshoot this. It gives you access to the ‘Log console’ where things will go if they aren’t handled properly. For example, remove the line with out: from the code above, and run it again and click the button. It will send the output object to the ‘Log console’ and this means you aren’t connecting ipywidgets output to how you want it handled. (Note: you’ll see the ‘Log console’ status indicator along the bottom left side of Jupyter light up blue when you do that and then you click the blue indicator below to open it.) The Output widget that is provided is one of the most straightforward ways to do this, see Output widgets: leveraging Jupyter’s display system. Admittedly, in this case here it seems a little odd since you want the button click to trigger javascript in the browser, however, you still have to respect the paths that ipywidgets utilizes to connext that communication. The simpler examples in Output widgets: leveraging Jupyter’s display system will give you a better sense of what is the normal use completely within ipywidgets. For more out output handling in modern Jupyter and ipywidgets, see here and references you’ll find subsequently following further links there and in the additinal references.
The ipywidgets button:
There is a nice, current example of using the ipywidgets button here in the ipywidgets documentation that has proper use and syntax. If you need more, search my examples here at StackOverflow and here at the Jupyter Discourse site. That will probably give you a few more examples.
Thinking more broadly about your title
Your title is more broad than the actual issues in your example. And the landscape has change to how other Javascript gets used inside notebooks, too. You, and others who end up here based on the emphasis on Javascript in the title, may wish to see a recent reply that addresses using javascript in current tech.
1