I am currently working on a website and I am using python, dash and bootstrap. I am making cards from bootstrap for hundreds of items. The problem is on each cards there is an edit button that when clicked will pop up a modal with the information on that item. I have no clue on how to create one callback for for every single one of these items.
from collections import OrderedDict
import dash
import pandas as pd
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
def card_maker(site_number):
return dbc.Card(
dbc.CardBody([
html.H4(site_number,style={'display':'inline-block'}),
dbc.Button("Edit", id="open-xl"+site_number, color="secondary", className="button-
style",style={'margin-right':'10px','display':'inline-
block','float':'right'}),
dbc.Modal(
[
dbc.ModalHeader(site_number),
dbc.ModalBody("Information"),
dbc.ModalFooter(
dbc.Button("Close", id="close-xl"+site_number, className="ml-auto"+site_number)
),
],
id="modal-xl" +site_number,
size="xl",
),
]
),
className="mb-3",
id = "card-" + site_number
)
cards = html.Div(
[
card_maker(site_number) for site_number in site_numbers #Site numbers is a list of unique numbers all of equal length
],
id = 'cards',
className="cards",
style={'padding-left':'150px','padding-right':'150px', "overflowY": "scroll", 'maxHeight': '650px'}
)
def toggle_modal(n1, n2, is_open):
if n1 or n2:
return not is_open
return is_open
for eng_num in site_numbers:
app.callback(
Output("modal-xl"+ num, "is_open"),
[Input("open-xl"+ num, "n_clicks"), Input("close-xl"+ num, "n_clicks")],
[State("modal-xl"+ num, "is_open")],
)(toggle_modal)
I created unique id's for every card and every single model and this code above works but only for a small amount of cards. I will be working with close to 1000+ cards on my site.
When I have over around 100 then the site fails to load. If anyone has any code or ideas on how to make multiple buttons like this that all do basically the same action, then please share it.
