The dbc Button is not incrementing n_clicks

Dash Python
1

Dash Bootstrap Component Button isn’t WORKING

Hey guys,
So I am trying to program a shop interface with dash plotly with some sales info and products… etc
But I am having a big problem, When I click in ADD NEW ITEM button it opens a dbc.MODAL and inside of it it has some inputs and when you fill all of them you click in the Save button, it supposilly store in a database, but that action is never triggered because the save button n_cliks property does not increment.
Here is my code:

# sql function
"""
    This function adds a product to our DB to the Product Table!
    The product id auto-increments
    Arguments:
        -   Name of the product
        -   Price of each product unit
        -   Product unit (eggs, kilo, meters...)
        -   If the product has limited stock or not
        -   Current amount of product units in stock
        -   If is active for sale or not
        -   Local path to image of the product
"""
def add_product(cursor, connection, name, price_per_unit, basic_unit, limited, stock, active_for_sale, image_url, description):
    cursor.execute(
        """
            INSERT INTO Product VALUES(NULL,?,?,?,?,?,?,?,?)
        """,
        (name, price_per_unit, basic_unit, limited, stock, active_for_sale, image_url, description)
    )
    print(cursor.execute("SELECT * FROM Product"))
    connection.commit()

## dash part

add_new_item_button = dbc.Button(
    id="add_new_item_btn",
    type="button",
    className="btn btn-danger m-5",
    children=[
        html.I(className="fas fa-plus text-white"),
        " New Item",

    ]
)

save_button = dbc.Button("Save", id="save_new_item_button", className="btn btn-danger")
close_button_add_new = dbc.Button("Close", id="close_modal_add_new", className="btn btn-outline-danger")![Captura de ecrã de 2021-02-15 15-59-27|690x226](upload://f0mmaq3mZSKmEJR6vT3FNGvpuAs.png) 

add_new_item_modal = dbc.Modal(
    [
        dbc.ModalHeader(
            "ADD NEW ITEM TO THE STORE",
        ),
        dbc.ModalBody(
            [
                name_input, description_input, price_input, unit_input,
                limited_input, stock_input, active_input, image_upload
            ],
        ),
        dbc.ModalFooter(
            [
                html.P(id="add-new-status", className="text-danger"),
                save_button,
                close_button_add_new,

            ]
        )
    ],
    backdrop="static",
    scrollable=True,
    id="modal_add_new"
)

@app.callback(
    Output("modal_add_new", "is_open"),
    Output("add-new-status", "children"),
    [
        Input("add_new_item_btn", "n_clicks"),
        Input("close_modal_add_new", "n_clicks"),
        Input("save_new_item_button", "n_clicks"),
        Input("name-row", "value"),
        Input("description-row", "value"),
        Input("price-row", "value"),
        Input("unit-row", "value"),
        Input("limited-row", "value"),
        Input("stock-row", "value"),
        Input("active-row", "value"),
        Input("image-row", "filename"),
        Input("image-row", "contents"),
    ],
    [State("modal_add_new", "is_open")],
)
def toggle_modal(add, close, save, name, desc, price, unit, limited, stock, active, filename, content, is_open):

    # CONNECT TO SQLITE3 DATABASE
    connection = sql.connect(DATABASE)
    cursor = connection.cursor()

    if add or close:
        return not is_open, ""
    if save:
        print(is_open)
        if name is None or len(name) > 20:
            return is_open, "Enter a correct name."
        if desc is None:
            return is_open, "Enter a correct description."
        if price is None or price <= 0:
            return is_open, "Enter a number bigger than 0 in price field."
        if unit is None:
            return is_open, "Enter a correct Basic Unit."
        if limited != "yes" or limited != "no" or limited is None:
            return is_open, "Enter 'yes' or 'no' in limited field."
        if stock is None or stock < 0:
            return is_open, "Enter a number equal or bigger than 0 in stock field."
        if active != "yes" or active != "no" or active is None:
            return is_open, "Enter 'yes' or 'no' in active field."
        if filename is None or content is None:
            return is_open, "Invalid image file"
        else:
            for n, d in zip(filename, content):
                save_file(n, d)
            add_product(cursor, connection, name, price, unit, limited, stock, active, filename, desc)
            print("added")
            return is_open, "Added successfully"

    return is_open, ""

Can you help finding out where is the bug? Thank you all!

2

I think the problem is in your callback

def toggle_modal(add, close, save, name, desc, price, unit, limited, stock, active, filename, content, is_open):

    # CONNECT TO SQLITE3 DATABASE
    connection = sql.connect(DATABASE)
    cursor = connection.cursor()

    if add or close:
        return not is_open, ""
    if save:
        print(is_open)
        ...

If the add button is clicked, the first if statement is satisfied and the callback will return before any of the database logic is reached.

When you click on the add button does the modal close? If so then I think this is what’s happening.

1 Like
3

Yes it does!
it is closing automaticaly!