Hello All,
I am in a situation where I am seeking any possible help.
Situation : I am trying to load a page with more than 500 small html boxes (or cards in terms of Bootstrap) and wanted to show the details of each card in a Modal window when the button is clicked.
Below is the code and the snap shot of the page that is loading. The issue I am facing here is why after pressing ‘Job Detail’ button my callback function is not firing up.
I tried different ways like using single call back instead of two, or loading the Modal window in my for loop and other as well. But none worked. Sometimes got “Loading Dependencies error” or sometimes the page was not able to load.
Here is the code:
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
import pyodbc
import pandas as pd
import math
from app import app
I have deleted the connection string–
sql=“select * from TABLE(QSYS2.ACTIVE_JOB_INFO())”
df=pd.read_sql_query(sql,connection)
rowCount = math.ceil(df.shape[0]/4)
totalJobs = df.shape[0]
app.layout = html.Div([
html.Div([
html.H2(‘CAS System Jobs’, style={‘color’: ‘white’,‘marginLeft’: ‘3%’,‘marginTop’: ‘1%’})
],style={'background': '#139847', 'float': 'left', 'marginBottom': 10, 'width': '100%', 'height': 60}),
html.Div([
dcc.Input(id=‘search’, type=‘hidden’),
html.Div(id="show-jobs", children=[]),
]),
])
modal= html.Div([
dbc.Modal(
[
dbc.ModalHeader(“Header”),
dbc.ModalBody(“This the Modal Body”),
dbc.ModalFooter(
dbc.Button(“Close”, id=“close”, className=“ml-auto”)
),
], id=“modal”
)])
app.title = ‘CAS System Jobs’
@app.callback(Output(‘show-jobs’, ‘children’),
[Input(‘search’, ‘value’)])
def load_initial_job_page(value):
joblist = []
for i in range(totalJobs):
joblist.append(
html.Div([dbc.Card([dbc.CardBody([
html.P(df[‘JOB_NAME’][i], className=“card-title”, style={‘fontSize’: 14, ‘fontWeight’: ‘bold’}),
html.Label("Status: ")
, html.P(df[‘JOB_STATUS’][i], className=“card-text”),
dbc.Button("Job Details", color="primary", id="open",n_clicks=0,className="mt-auto")])]
, className="", outline=True,
style={'width': "30rem", 'height': '16rem'}, color="success"
)
], className="column"))
return joblist
@app.callback(
Output(“modal”, “is_open”),
[
Input(“open”, “n_clicks”),
Input(“close”, “n_clicks”)
],
[State(“modal”, “is_open”)]
)
def get_selected_data1(open_click,close_click,is_open):
if open_click or close_click:
return not is_open
return is_open
So right now I am not loading Modal window in my Layout( in my previous trials I have done that but did not work) but just storing it in a modal variable.
Can someone suggest me how to include this in my page layout once the callback is accepted by button with id=“open” (Job Details).
please answer these:
1.That button is not firing the call back
2. This button has same id so many times on the same page but DASH did not throw error for duplicate button Id.? why?
Here is the snapshot from my page as well.