Copy content of variable into clipboard when rendering html with voila and Jupyter Hub (injecting JS via Ipython??)

Question

I am rendering an Html page out of a jupyter notebook stored in a server using Jupyter HUB.

When using voila I would like to create a button that will copy into the clipboard the content of a particular variable (text).

The most simple example to reproduce the situation would be as follows. I try to inject JS via Ipython using the code that I got here: (Copy output of a JavaScript variable to the clipboard) A button should fire the code and put the text into the clipboard. But it does not.

import ipywidgets as widgets
from IPython.display import display, HTML, Javascript
mybtn = widgets.Button(description='copy to clipboard',button_style='success')
        
def mybtn_event_handler(change):
    display(Javascript('''var cb = document.getElementById("cb");
  cb.value = 'asdfasdfasdfasdfasdfasdf';
  cb.style.display='block';
  cb.select();
  document.execCommand('copy');
  cb.style.display='none';''')) 

mybtn.on_click(mybtn_event_handler)

display(mybtn)

This does not work in a jupyter hub. I guess because actually you are not running the code in the local machine.

Any idea how to deal with this situation?

Actually this problem is encountered in other situations in which with Ipython you can interact with the local browser when rendering a notebook with voila locally. For instance using the webbrowser module to open a new tab is easy but it does not work the moment the notebook is run in the jupyter HUB.

Any idea?

NOTE: The code does not produce an error, in the log simply appears: <IPython.core.display.Javascript object>

NOTE2: ran locally actually this code does not work, it produces: Javascript error adding output! TypeError: Cannot set property 'value' of null See your browser Javascript console for more details.

Answer 1

According to documentation - you should wrap your onclick method output with widgets.Output(). So in order to run some Javascript with a button click you should do something like this:

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

mybtn = widgets.Button(description='copy to clipboard',button_style='success')
output = widgets.Output()

display(mybtn, output)
        
def mybtn_event_handler(b):
    with output:
        display(Javascript('''console.log("Success");''')) 

mybtn.on_click(mybtn_event_handler)