Dynamic layouts containing elements with callbacks

Dash Python
1

Hey all,

I’ve been hitting my head against the following problem. I have a layout with a bunch of elements whose ‘value’ I target using States within a callback. I wanted to make it so the callback targeted the ‘children’ attribute of the parent element containing all the elements being targeted by the callback. So the callback is essentially of replacing the chunk of layout containing all the relevant elements to itself. Unfortunately things are not happy on the client side in this scenario, as when I initiate the callback I get “TypeError: undefined does not have a method named “concat”” in my browser console. I presume this is because I’ve removed all the elements that were bound to States but re-inserting a component tree containing elements with the same IDs doesn’t recreate the bindings. (?)

I then moved on and tried to do this differently using app.layout set to a function, so that the layout would be produced dynamically. Unfortunately it seems like associating any callbacks with elements in this dynamic layout still breaks things, as I get “Error loading layout” in the browser itself, and the same “TypeError: undefined does not have a method named “concat”” in the console.

Is it not possible to target callbacks at elements in a dynamic layout produced using a function? If so, it doesn’t seem like there’d be much point to using this.

(Also, I should note that I’m stretching Dash a bit for what it’s meant for, as the layout I need to regenerate is populated from a global variable – a no no, I’m aware, but there’s only ever going to be one user of the app at a time, so I think I should be able to manage those complexities of state)

2

So I’m pretty sure the issue was a self-inflicted one. I’m dynamically generating component_ids for the targets, and it turns out I forgot that I need to reset the counter. It looks like when the app.layout is a callable, it’s called twice, and the second call was the one that was getting me.

2 Likes
3

@nedned I know you’ve been past this issue for a while, but I’m trying to take a similar approach now with dynamically generating components with @id values linked to callbacks, and it’s breaking on me with the same error. I’m pretty new to Dash and to using web frameworks in general – could you clarify what exactly you did to get around this, and what you mean by reset the counter?

Thanks!