Problem to import javascript file on multiple dash page

[GauNi]

Hello,

grasia_dash_components works pretty well to import javascript file on 1 page. I really love that tool!

But I work with multiple pages it does not work anymore. I explain my problem :
I have 1 main page with multiple input and a list of strategies (chosen by the user). When I click on a button it open 1 page for each strategy selected and the common input must be the same than the main page.

Here is my output :

list_strategies = [strat1, strat2, start3]
list_end = [20, 25, 30]

First_page = html.Div([
    html.Div([dcc.Dropdown(id='strategy', options=[{'label': i, 'value': i} for i in list_strategies], multi=True)])
    html.Div([dcc.Input(id='value_start', type='text', value=10)]),
    html.Button('Open page', id='button'),
    html.Div(id='hidden-div', style={'display': 'none'})
])

MyLayout = []
for i in range(len(list_strategies)) : 
    MyLayouti = html.Div([
        html.Div([dcc.Dropdown(id='strategy'+str(i), options=[{'label': i, 'value': i} for i in list_strategies], value=list_strategies[i])])
        html.Div([dcc.Input(id='value_start'+str(i), type='text', value=10)]),
        html.Div([dcc.Input(id='value_end'+str(i), type='text', value=list_end[i])]),
        html.Button('Create Graph', id='button'+str(i)),
        dcc.Graph(id='graph'+str(i), config={'editable': True, 'modeBarButtonsToRemove': ['sendDataToCloud', 'hoverClosestCartesian', 'hoverCompareCartesian']}),
        gdc.Import(src="http://localhost/toto.js"),
    ])
    MyLayout.append(MyLayouti)

And the layout printed on each page is chosen with the following code :

# start a Dash Application
app = dash.Dash()
app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content'),
])

# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),[dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    for i in range(len(list_strategies)) : 
        if pathname == '/page-'+str(list_strategies[i]) : return MyLayout[i]
    if pathname == '/' : return First_page

list_event = [Event('button', 'click')]
list_state = [State('strategy', 'value')]
@app.callback(Output('hidden-div', 'children'),events=list_event, state = list_state)
def create_callback_share(list_strategies_used):
    for _strat in list_strategies_used :
        time.sleep(1)
        webbrowser.open('http://localhost:9992/page-'+_strat)

The way I send the info about the starting date is by using a javascript file. My toto file contains the following lines :

 val = document.getElementById('value_start').date_start;
 document.getElementById('value_start0').value = val*10;
 document.getElementById('value_start1').value = val*10;
 document.getElementById('value_start2').value = val*10;

What is strang is : when I Import toto into MyLayouti then the Layout is not printed anymore while it was working really well when I had 1 page (when I was printing all graph into the same instead of creating 1 page per graph).

It is possible to make grasia_dash_components works with callback ?

[Akronix]

Hello @GauNi, thank you for reporting this issue.
Can you please tell me what you see in your Browser's Developer tools Console? Is there any error in there?