trigger javascript from onclick in Dash

Question

I have a Python Dash app running, with a couple of callbacks and a nice looking graph. What I need next, is to have a button for copying some results to the cliboard in excel format (pretty specific, yup). I guess I need to implement a javascript function triggered by a button onclick, but I have no idea how to get the Python app to call the javascript. Can somebody help me out with this one? :)

something like this:

function copy_to_cliboard() {
  var copyText = document.getElementById("text_input");

  copyText.select();
  copyText.setSelectionRange(0, 99999);

  document.execCommand("copy");

  alert("Copied the text: " + copyText.value);
}

thanks a lot!

This may be helpful: https://community.plot.ly/t/dash-v1-7-0-released/31961 — blong, Jun 12 '20 at 11:38

score 4 · Answer 1 · answered May 05 '20 at 08:24

In case some one is experiencing the same challenge, below is my solution.

app.clientside_callback(
    """
    function placeholder(n_clicks, data) {
        window.data_to_copy = data.data;
        var copyText = document.getElementById("text_input");
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        document.execCommand("copy");
    }

    // Overwrite what is being copied to the clipboard.
    document.addEventListener('copy', function(e){
      // e.clipboardData is initially empty, but we can set it to the
      // data that we want copied onto the clipboard.
      e.clipboardData.setData('text/plain', window.data_to_copy);

      // This is necessary to prevent the current document selection from
      // being written to the clipboard.
      e.preventDefault();
    });
    """,
    [Output("copy_output", "children")],
    [Input("copy_button", "n_clicks")],
    [State("excel_output", "data")]
)

For more information on clientside callbacks refer here: https://dash.plotly.com/clientside-callbacks — Hamza Zubair, Aug 03 '20 at 05:33

score 0 · Answer 2 · answered May 01 '20 at 09:44

You have to use socket for this, using sockets servers can trigger frontend. Push notifications are also used to send messages to the frontend, but in your case, sockets are the best solution. Please refer to the following answer. Hope it helps.

https://stackoverflow.com/a/52792016/11035114

trigger javascript from onclick in Dash

2 Answers2