How to save input from a dbc.Modal and write to mySql database in Python Dash app?-CodePudding

I have created a button when clicked will pop up a dash boostrap component, dbc.Modal with a couple input fields. Now I'm wondering how can I save this input information and write to a database like MySQL.

I know how to read/write to a DB in the context of a regular html button in Dash with a callback function that triggers when button clicked. But lost on how to use with a modal and callback. I couldn't find any examples online and documentations don't show how to use a modal to save input data and connect with external DB. Please advise. Below is a segment of my code:

Edited Code:

dbc.Modal(
                            [
                                dbc.ModalHeader("Add Favorite Faculty"),
                                dbc.ModalBody(
                                    dbc.Form(
                                        [
                                            dbc.Row(
                                                [
                                                    dbc.Label("Enter Name:", id="fav-name"),
                                                    dbc.Input(type="text", placeholder="name")
                                                ]
                                            ),
                                            html.Br(),
                                            dbc.Row(
                                                [
                                                    dbc.Label("Enter Email:", id="fav-email"),
                                                    dbc.Input(type="email", placeholder="email")
                                                ],
                                            ),
                                            html.Br(),
                                            dbc.Row(
                                                [
                                                    dbc.Label("Enter Comment:", id="fav-comment"),
                                                    dbc.Input(type="text", placeholder="comment")
                                                ],
                                            ),
                                            html.Br(),
                                            dbc.Button("Submit", id='fav-submit', color="primary"),
                                        ],
                                    )
                                ),
                                dbc.ModalFooter(
                                    dbc.Button("Close", color="secondary", id="close-add-faculty", className="ml-auto")
                                ),
                            ],
                            id="fav-modal",
                            is_open=False,

And my basic callback function that just opens and closes the modal. Essentially I want to save the input fields when a submit button is clicked and write to a databse.

# prompt modal
@app.callback(
    Output("fav-modal", "is_open"),
    [
        Input("add-faculty-button", "n_clicks"),
        Input("close-add-faculty", "n_clicks")
    ],
    [State("fav-modal", "is_open")]
)
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open

# write to DB
@app.callback(
    Output("written", "children"),
    [
        State("fav-name", "value"),
        State("fav-email", "value"),
        State("fav-comment", "value")
    ],
    [
        Input("fav-submit", "n_clicks")
    ]
)
def write_to_db(n_clicks, name, email, comment):

    if n_clicks is not None:
        ....

An image of what it looks like:

CodePudding user response：

The fact that these inputs are inside a modal doesn't matter in this case. You can still set up callbacks using those component IDs to get the value of each input, and then use that to pass along to your database.

You may want to consider adding a "submit" button or something like that, which would serve as the trigger for your callback, and take these inputs as State. Otherwise, your callback would fire every time the input updates, and you would likely send lots of unwanted values to your database.

Edit:

You need to add IDs to all the dbc.Input components and the submit button in order to hook them up to the callback. Here's an example.

# layout code
    dbc.Input(type="text", placeholder="name", id='name-input')
# end of layout

@app.callback(
    Output("some-notification-contaienr", "children"),
    [
        Input("submit-button", "n_clicks"),
    ],
    [
        State("name-input", "value"),
        State("email-input", "value"),
        State("comment-input", "value"),
    ]
)
def toggle_modal(submit_clicks, name, email, comment):
    if not submit_clicks:
        raise PreventUpdate

    # some code here to send your stuff to the database
    # ...

    return 'Successfully submitted.'