Delete from postgresql using plotly dash

Dash Python
1

I created a generatable charts that saved in postgresql. And I added some buttons like a delete button for every charts. It look like this

image
image1277×631 18.8 KB

How can I use the delete button? I tried to create another callback, but I think it didn’t read every button. If I click the other delete button it’s printing “None” but, if I click the last one it’s printing “1”. Is there another solution? I wanted to use the delete button for every chart. I want to get the value from the dcc.input if I click the button. I’m open with any suggestion to improve my work.

app.layout = html.Div(id='graphs', children=[
])

@app.callback(Output('graphs', 'children'),
              Input('graphs', 'children'))
def update_extend_traces_traceselect(child):

fig = go.Figure()
                fig.add_trace(
                    go.Bar(
                        x=xval,
                        y=yval,
                        name=barname,
                        marker_color=barcolor,
                        orientation=orientation,
                        marker_line_color=markerlinecolor,
                        marker_line_width=float(markerlinewidth)
                    ))
fig.update_layout(
                title=title,
            )
child.append(html.Div(
dcc.Input(
                id="charts-id",
                type="text",
                value=chart_ID[i]
            ),
                html.Button('Delete', id='delete-chart', n_clicks=0),
                dcc.Graph(figure=fig,
                          config={
                              'displayModeBar': False,
                          })],
                style={'height': '550px', 'width': '550px', 'margin': '10px',
                       'border': '1px solid'}))
return child

@app.callback(Output('delete-chart', 'n_clicks'),
              Input('delete-chart', 'n_clicks'),
              State('charts-id', 'value')
              )
def delete(n_clicks, value):
    print(n_clicks) //only for the last chart works//
    print(value) //printing the value of the last dcc.input//

if "OverviewChart" == '__main__':
    app.run_server(debug=True)
2

@Chrollo,

Every element on the page must have a unique id in order to be used in a callback. What you can do is have a hidden button that you cant push and these other buttons just fire a click event on that element, passing the target id as an argument with a clientside callback.

app.clientside_callback(
'''function removeChart(n1, children) {
     if (n1 > 0) { console.log(event.target.parentNode.id)}
return ''}'''
Output('hiddenButton', 'value'), Input('hiddenButton','n_clicks'), State('graphs','children')
}
)

And on the buttons, pass:

onclick='$("#hiddenButton").click()'

This uses jquery, you can use straight up javascript click as well but its a longer code.

1 Like
4

It’s same If I click the other delete button it consoles blank but, if I click the last one it consoles “1”.

Plus having an error {message: 'ID not found in layout', html: 'Attempting to connect a callback Output item to co…allback(s) for Output(s):\n hiddenButton.n_clicks'}

        child.append(html.Div([dcc.Input(
            id="charts-id",
            type="text",
            value=chart_ID[i]
        ), html.Button('EDIT', id='edit-chart',
                       style={'margin': '5px'}),
            html.Button('Delete', id='hiddenButton', n_clicks=0,
                        style={'margin': '5px'}),
            dcc.Graph(figure=fig,
                      config={
                          'displayModeBar': False,
                      })],
            style={'height': '550px', 'width': '550px', 'margin': '10px',
                   'border': '1px solid'}))

app.clientside_callback(
“”"
function removeChart(n1, children) {
console.log(n1)
return ‘’}
“”",
Output(‘hiddenButton’, ‘n_clicks’), Input(
‘hiddenButton’, ‘n_clicks’), State(‘graphs’, ‘children’)
)

5

@Chrollo,

The hiddenButton needs to be in the app.layout, not the child layout.

And you hide that button, then the button you add in the child doesn’t have to have a callback, just an on click function that clicks the hiddenButton with JavaScript.