CODEWITHSUNDEEP
javascriptpython-3.xplotly-dash
Johann Kaspar
Johann Kaspar

Reputation: 181

trigger javascript from onclick in Dash

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!

Upvotes: 6

Views: 6742

Answers (2)

Johann Kaspar
Johann Kaspar

Reputation: 181

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

Upvotes: 4

Hamza Arshad
Hamza Arshad

Reputation: 846

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

Upvotes: 0

Related Questions