javascript - dash app custom JS cannot find the dcc.Store for callback - Stack Overflow

admin管理员组

文章数量:1125619

I am creating a webapp that should provide the python code with a callback whenever user rightclicks in the webapp.

I tried to do this with a dcc.Store and to write to the store on a contextmenu event. So far so good. I put this custom code that catches the contextmenu event in assets/custom.js, however, when I try to get the store with var store = document.getElementById("contextmenu_data");, it returns null, thus never actually writing something to the store. What could be wrong?

Here is an MRE for the python and JS code:

Python

import dash
from dash import dcc, html
from dash.dependencies import Input, Output

import threading

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(id="output"),
    dcc.Store(id='contextmenu_data'),
])

@app.callback(Output("output", 'children'),
              Input("contextmenu_data", 'data'),
              )
def right_click_action(data):
    print(f"right_click_action called with data: {data}")
    if data:
        return f"coordinates are {data}"
    return "no rightclicks have happened"

def run_dash():
    app.run_server(debug=False)

if __name__ == '__main__':

    server = threading.Thread(target=run_dash, daemon=True)
    server.start()

js

window.onload = function() {
    document.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        var store = document.getElementById("contextmenu_data");
        console.log(store);
        if (store) {
            var data = {x: event.clientX, y: event.clientY};
            store.setAttribute('data', JSON.stringify(data));
            store.dispatchEvent(new CustomEvent('data'));
        }
    });
};

本文标签： javascriptdash app custom JS cannot find the dccStore for callbackStack Overflow