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: community.plot.ly/t/dash-v1-7-0-released/31961 — blong
– blong, Commented Jun 12, 2020 at 11:38

Johann Kaspar · Accepted Answer · 2020-05-05 08:24:01Z

4

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")]
)

answered May 5, 2020 at 8:24

Johann Kaspar

1912 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hamza Zubair Over a year ago

For more information on clientside callbacks refer here: dash.plotly.com/clientside-callbacks

Hamza Arshad · Accepted Answer · 2020-05-01 09:44:59Z

0

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

answered May 1, 2020 at 9:44

Hamza Arshad

8465 silver badges9 bronze badges

Collectives™ on Stack Overflow

trigger javascript from onclick in Dash

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related