Pass a callback to html.A 'href' field

Dash Python
1

Hello!
I’m new to Dash - I am working on quite a simple graph visualisation project.
I am having issues in passing the callback to an html.A() call: the correct url is printed but the hyperlink is not, in fact the home page is kept as the redirecting address. I have tried to both leave the href field blank and to use the id name like in the snippet below.
Here is a snippet of my code to exemplify it:

html.Label(['Figure/Data: ', html.A(href='url', id='url', target="_blank")])

@app.callback(
    dash.dependencies.Output('url', 'children'),
    [dash.dependencies.Input('my-graph', 'clickData')])
def display_link_data(clickData):
    try:
        text = clickData['points'][0]['hovertext'].split('<br>')
        link = text[-1].split(': ')[-1]
    except:
        link='/'
    return json.dumps(link, indent=2)

My question is how to have the returned callback value used in the href= input of the html.A() call.

Thanks in advance for the help!
Cheers,
Giuseppe

2

Something like this?

@app.callback( [dash.dependencies.Output('url', 'children'),dash.dependencies.Output('url', 'href')], [dash.dependencies.Input('my-graph', 'clickData')]) def display_link_data(clickData):
def display_link_data(clickData):
    try:
        text = clickData['points'][0]['hovertext'].split('<br>')
        link = text[-1].split(': ')[-1]
    except:
        link='/'
    link = json.dumps(link, indent=2)
    return [link, link]
1 Like
3

Thanks for the quick reply!
Your answer is almost correct but the hyperlink still maintains the homepage address before the new url that is sent by the callback - e.g. http://127.0.0.1:8050/%22https://science.sciencemag.org/content/sci/265/5172/%22https://science.sciencemag.org/content/sci/265/5172/676.full.pdf%22

How to get rid of it?

4

Any more suggestions? i’m still stuck with this issue…
Thanks,
Giuseppe

5

I need the answer to this as well,

6

I have solved this problem using a chatGPT hint (this method change the behavior of the component similar to a button):

for the hmlt.A() href property:

html.A(
    id="my-id",
    className="my-id",
    href: "javascript:void(0);"  # this do the magic
)

for the callback just use as a normal button:

@app.callback(
    Output("output-id", 'children', allow_duplicate=True),
    Input('my-id', 'n_clicks'),
    prevent_initial_call=True,
)
def my_calbck(n_clicks):
    if n_clicks != None:
        return(
            [
                 your_output
            ]
        )
    else:
        raise PreventUpdate

A COMPLETE FUNCTIONAL EXAMPLE:

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


app = dash.Dash(__name__)

app.layout = html.Div([
    html.A('Meu link', href='javascript:void(0);', id='meu-link'),
    html.Div(id='minha-div'),
    dcc.Location(id='url', refresh=False),
])

@app.callback(
    Output('minha-div', 'children'),
    Output('url', 'pathname'),
    Input('meu-link', 'n_clicks'),
)
def update_output(n_clicks):
    return(
        f'O link foi clicado {n_clicks} vezes.',
        f"{n_clicks}-clicks"
    )

if __name__ == '__main__':
    app.run_server(debug=True)
1 Like