Callback Error in updating html.Div children: Div received a mix of current return and previous children, and unable to update

Dash Python
1

I want to return a string ‘Train In Progress…’ to a html.Div, which previously has a dashTable as children, but I got an error as below and the callback seems to return a mix of both the string ‘Train In Progress…’ and the previous dashTable to the html.Div. Did anyone ever get similar problem or give me some instructions? Thanks!

Error:
An object was provided as children instead of a component, string, or number (or list of those). Check the children property that looks something like:
{
“0”: “T”,
“1”: “r”,
“2”: “a”,
“3”: “i”,
“4”: “n”,
“5”: " ",
“6”: “I”,
“7”: “n”,
“8”: " ",
“9”: “P”,
“10”: “r”,
“11”: “o”,
“12”: “g”,
“13”: “r”,
“14”: “e”,
“15”: “s”,
“16”: “s”,
“17”: “.”,
“18”: “.”,
“19”: “.”,
“props”: {
“children”: [
null,
{
“props”: {
“children”: {
“props”: {
“children”: {
“props”: {
“derived_filter_structure”: null,
“derived_virtual_data”: [
{
“EventTitle”: “north sea - upsc - firefighting equipment rfp”,
“CommodityName”: “m r o”,
“ItemTitle”: “10035571”,
“SupplierName”: “hawkes fire”
},
{
“EventTitle”: “north sea - upsc - firefighting equipment rfp”,
“CommodityName”: “m r o”,
“ItemTitle”: “82ac5023”,
“SupplierName”: “chubb”
}
],
“derived_virtual_indices”: [
0,
1
],
“derived_virtual_row_ids”: [
null,
null
],
“derived_viewport_data”: [
{
“EventTitle”: “north sea - upsc - firefighting equipment rfp”,
“CommodityName”: “m r o”,
“ItemTitle”: “10035571”,
“SupplierName”: “hawkes fire”
},
{
“EventTitle”: “north sea - upsc - firefighting equipment rfp”,
“CommodityName”: “m r o”,
“ItemTitle”: “82ac5023”,
“SupplierName”: “chubb”
}
],
“derived_viewport_indices”: [
0,
1
],
“derived_viewport_row_ids”: [
null,
null
],
“derived_virtual_selected_rows”: ,
“derived_virtual_selected_row_ids”: ,
“derived_viewport_selected_rows”: ,
“derived_viewport_selected_row_ids”:
}
}
}
}
}
}
]
}
}

2

Please see 📣 How to provide your sample code in right format (and update your post). Also, providing a self-contained, and complete, sample file of your code greaty helps us forum users in providing feedback.

3

I solved the problem but I think there might be something wrong within dash. I sometimes get error when I try to update a component children to a different type of children, for example, in this case, I want to update children:a table(wrapped by a div) to children: string, dash will have some problem processing the update content and will show error. But if I first clean the children then update it ( children:table–>children:None–>children:string), then it works fine.

1 Like
4

@Lion I’m having the same issue, I need to update children of a particular div with string which previously had datatable.

Can you please let me know how are you cleaning the children before updating.

5

Hi Ratejesh,
Just saw your msg. I solved this problem by first clean the div to None then assign a new type children. As I mentioned above, I wasn’t able to update a datatable to a string directly, so I update the div in this order [children:table–>children:None–>children:string].

6

Hi Lion,
Im new to Dash, can you let me know how this can be done in callbacks. Below is my code, after generating table in Page2 (tab div), if I navigate to other pages I get the error(Also if I refresh the same page)

# standard library
import os
import datetime

# dash libs
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
import dash_daq as daq
import plotly.figure_factory as ff
import plotly.graph_objs as go

# pydata stack
import pandas as pd
import numpy as np
from sqlalchemy import create_engine

# create database
conn = create_engine('sqlite:///')  # using absolute path

# Import app
from app import *


def generate_dashtable(dataframe):
    return dt.DataTable(
        id='mapping_table',
        # data import
        data=dataframe.to_dict("rows"),
        columns=[{"name": i, "id": i} for i in dataframe.columns],
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        page_action='native',
        page_current=0,
        page_size=100,
        # style table
        style_table={
            'maxHeight': '500px',
            'overflowY': 'scroll',
            'minWidth': '100%',
        },
        # style cell
        style_cell={
            'textAlign': 'center',
            'height': '50px',
            'padding': '2px 22px',
            'whiteSpace': 'inherit',
            'overflow': 'hidden',
            'textOverflow': 'ellipsis',
        },
        # style header
        style_header={
            'fontWeight': 'bold',
            'backgroundColor': 'grey',
            'color': 'white',
        },
        # style filter
        # style data
        style_data_conditional=[
            {
                # stripped rows
                'if': {'row_index': 'odd'},
                'backgroundColor': 'lightgrey'
            },
        ],
    ),


# Menu Function
def menu():
    return html.Div(
        id="app_heading",
        className="class_app_heading",
        children=[
            html.Div(
                id="app_logo",
                children=[
                    html.Img(src='/assets/logo.png')
                ],
            ),
            html.Div(
                id="app-menu",
                className="class_app_menu",
                children=[
                    dcc.Link('Home',
                             href='/home',
                             id='id_page_1',
                             className='',
                             ),
                    dcc.Link('Page 2',
                             href='/page2',
                             id='id_page_2',
                             className='',
                             ),
                ],
            ),
        ],
    )


# Home Page
def content_home():
    return html.Div(
        [
            html.H1('This is Home Page'),
            html.Hr(),
            html.H1('The time is: ' + str(datetime.datetime.now()))
        ],
        className='main_content'
    )


# Page2
def page2():
    return html.Div(
        [
            dcc.Markdown('''
            >Please Select Below tabs as per requirement!
            '''),
            dcc.Tabs(
                id="mapping_tabs",
                className='custom-tabs-container',
                children=[
                    dcc.Tab(label='tab1',
                            value='tab1',
                            selected_className='custom-tab--selected',
                            ),
                    dcc.Tab(label='tab2',
                            value='tab2',
                            selected_className='custom-tab--selected'),
                ],
            ),
            dcc.Loading(
                color='#ff9900',
                children=[
                    html.Div(id='tab_content_div')
                ], ),
        ],
        className='main_content'
    )


def serve_layout():
    return html.Div(
        [
            menu(),
            dcc.Location(id='url', refresh=False),
            dcc.Loading(color='#ff9900',
                        children=[
                            html.Div(id='page-content')
                        ]
                        )
        ]
    )


app.layout = serve_layout()


# Index Callbacks-------------------------------------------------------------------------------------------------------
@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if not pathname is None:
        pathname = pathname.lower()

    if pathname == '/page2':
        return page2()
    elif pathname in ["/", "/home"]:
        return content_home()
    # If the user tries to reach a different page, return a 404 message
    return html.Div(
        [
            html.H1("404: Page Not found", className="text-danger"),
            html.Hr(),
        ]
    )


# Page2 callbacks
@app.callback(
    Output('tab_content_div', 'children'),
    [
        Input('mapping_tabs', 'value')
    ]
)
def render_content(tab):
    if tab == 'tab1':
        sql = 'Select distinct * from table1'
        df = pd.read_sql_query(sql, conn)
        content = generate_dashtable(df)

        return content
    elif tab == 'tab2':
        sql = 'Select distinct * from table2'
        df = pd.read_sql_query(sql, conn)
        content = generate_dashtable(df)

        return content


if __name__ == '__main__':
    app.run_server(debug=True)
7

Hi, Wrap your datatables and everything around html.Div([“your datatable or dcc component etc”]) and then return.
I also faced similar issue.