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.

Rudertier · Accepted Answer · 2020-07-22 08:22:46Z

1

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?)

answered Jul 22, 2020 at 8:22

Rudertier

4363 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rahul Singh Over a year ago

Hey Rud, thanks! it worked. tbh I tried running it with multiple callbacks but was providing the 'link' as an input component_id with component_property "n_clicks" instead of assigning the id dynamically.

Rahul Singh · Accepted Answer · 2020-07-22 12:17:18Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related