Return ‘href’ value on a click event in Python Dash

Question

I have been trying to return the ‘href’ value from click event in python-Dash application. Below is my code snippet:

import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State


app = dash.Dash(
    __name__,
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
)


def make_table(df, val):
    table = []

    for index, row in df.iterrows():
        rows = []
        html.Td([
                    html.Div([row["col1"]]),
                    html.A(id = 'link',href=row["file-link"], children=row["link-name"], target="_blank"),
                  ])
        table.append(html.Tr(rows))

    return table


app.layout = html.Div([
                        html.Table(
                            id="table-element",
                            className="table__container",
                        )
                        ],
                        className="six columns",
                        ),


@app.callback(
    Output("link", 'pathname'),
    [Input('link', 'n_clicks')],
    [State('link', 'href')]
    )
def open_link(n_clicks, href):
    enable_open_link(href) #enable_open_link function takes in the href string value (a local filesystem link) and opens it up in a new window.


@app.callback(
    Output("table-element", 'children'),
    [Input("input-1-submit", 'n_submit')],
     [State('input-1-submit', 'value')]
)
def update_output(ns1,val):
    table = make_table(df,val)
    
    return table

This code works upto some extent i.e. it does returns a href value, but not the one I click. It always returns the last href value stored inside the html table.

Is there a way to fetch the href value when I click on the link? I know I can use Jquery to fetch the correct href value… but I didn’t find a way to integrate javascript within the call-back function.

Answer 1

Taking a clue from thread provided by @Rudertier, I was able to get the solution. Below is the updated code snippet:

def make_table(df, val):
    table = []

    for index, row in df.iterrows():
        rows = []
        html.Td([
                    html.Div([row["col1"]]),
                    html.A(id = 'link'+str(index),href=row["file-link"], children=row["link-name"], target="_blank"),
                  ])
        table.append(html.Tr(rows))

    return table


app.layout = html.Div([
                        html.Table(
                            id="table-element",
                            className="table__container",
                        )
                        ],
                        className="six columns",
                        ),


links = ['link1','link2','link3','link4','link5','link6','link7','link8','link9','link10']   
for link in links: 
    @app.callback(
        Output('{}'.format(link), 'pathname'),
        [Input('{}'.format(link), 'n_clicks')],
        [State('{}'.format(link), 'href')]
        )
    def open_link(n_clicks, href):
        enable_open_link(href) #enable_open_link function takes in the href string value (a local filesystem link) and opens it up in a new window.


@app.callback(
    Output("table-element", 'children'),
    [Input("input-1-submit", 'n_submit')],
     [State('input-1-submit', 'value')]
)
def update_output(ns1,val):
    table = make_table(df,val)
    
    return table

Answer 2

I think it's because all the links you'r creating have the same id ='link'.

You'll need to find a way around that. One possibilty would be to generate the id when creating it based on the index of your df, but then you'll also have to create the corresponding callbacks. This thread tells you how it could be done. plotly dash: create multiple callbacks (with loop?)