Retrieve Element in Not-Yet-Shown Tab Panel through JavaScript

[vahuynh12]

Question

Hello,

I am still very new to HTML and JavaScript so I am not sure if what I am asking below makes sense.

In the code below, my page has 2 tabs and 2 tab panels. I created a div in the 2nd tab panel (using ui.element("div") and want to be able to retrieve that element through JavaScript via document.getElementById.

However, because the 1st tab panel is the default tab panel shown on the page load, document.getElementById returns null for the div. I suspect the elements of the 2nd tab panel are not yet loaded(?). If I change the default tab panel to by the 2nd tab panel, then document.getElementById does return the desired element.

I am trying to either

• Somehow force the loading(?) of the elements in the 2nd tab panel without showing the 2nd tab panel.
• Listen to some event for when the div element in the 2nd tab panel is loaded.

Of these approaches, the 2nd option seems preferable.
I would appreciate any advice on how to go about this. Thank you for your help!

from nicegui import ui


@ui.page("/")
def home_page() -> None:
    with ui.tabs().classes("w-full") as tabs:
        one = ui.tab("One")
        two = ui.tab("Two")

    # NOTE: for the ui.tab_panels declaration below,
    # if value=two, then the console.log printout prints null
    # if value=two, then the console.log printout prints an HTML element
    with ui.tab_panels(tabs, value=one).classes("w-full"):
        with ui.tab_panel(one):
            ui.label("First tab")

        with ui.tab_panel(two):
            ui.label("Second tab")

            with (
                ui.element("div")
                .props("id='mycontainer'")
                .classes("p-2 bg-blue-100 w-full h-full") as div
            ):
                ui.label("My Container!")

    with tabs:
        ui.run_javascript("""
            console.log(document.getElementById('mycontainer'));
        """)

ui.run()

[falkoschindler]

Hi @vahuynh12,

This is a known problem (see #3033): Elements on hidden tabs don't get mounted until the tab is shown for the first time. Unfortunately, we still don't know how to avoid that.

To trigger some code when the tab is shown, you can subscribe to the change event of tabs:

tabs.on_value_change(...)