'I cannot get an ipywidgets on_button_clicked(b) event in Jupyter Notebook to work in exported HTML

I have a collection of widgets in a Jupyter Notebook, including an ipyleaflet Map and ipywidgets Button. I can get the button on_button_clicked(b) event to work in the notebook, but when I export the widgets to HTML, the button event does not seen to register. ''' from ipyleaflet import Map from ipywidgets import Button, interact from ipywidgets.embed import embed_data

def display_window(map): b1 = Button(description='test', disabled=False, button_style='')

    output = widgets.Output()
    def on_button_clicked(b):
        with output:
            #do something
    b1.on_click(on_button_clicked)
    #setup webpage
    data = embed_data(views=[b1, map])
    html_template = """
    <html>
      <head>

        <title>Test</title>

        <!-- Load RequireJS, used by the IPywidgets for dependency management -->
        <script 
          src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js" 
          integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" 
          crossorigin="anonymous">
        </script>

        <!-- Load IPywidgets bundle for embedding. -->
        <script
          data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
          src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js" 
          crossorigin="anonymous">
        </script>

        <!-- The state of all the widget models on the page -->
        <script type="application/vnd.jupyter.widget-state+json">
          {manager_state}
        </script>
      </head>

      <body>

        <h1>Test</h1>

        
        <div id="button">
          <!-- This script tag will be replaced by the view's DOM tree -->
          <script type="application/vnd.jupyter.widget-view+json">
            {widget_views[0]}
          </script>
        </div>
        
        <div id="ipyleaflet-map">
            <script type="application/vnd.jupyter.widget-view+json">
              {widget_views[1]}
            </script>
        </div>
        
      </body>
    </html>
    """

    manager_state = json.dumps(data['manager_state'])
    widget_views = [json.dumps(view) for view in data['view_specs']]
    rendered_template = html_template.format(manager_state=manager_state, widget_views=widget_views)

    html_file = open("text.html",'w')
    html_file.write(rendered_template)
    html_file.close()
ipywidgets


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions