Meta / Inline Script

Execute arbitrary Javascript.

from h2o_wave import site, ui

# This example displays a clock using Javascript.

page = site['/demo']

# Add a placeholder for the clock.
page['example'] = ui.markup_card(
    box='1 1 2 1',
    title='Time',
    content='<div id="clock"/>',
)

# Specify the Javascript code to display the clock.
clock_script = '''
// Locate the placeholder 'div' element in our markup_card.
const clock = document.getElementById("clock");
const displayTime = () => { clock.innerText = (new Date()).toLocaleString(); };

// Display the time every second (1000ms).
window.setInterval(displayTime, 1000);
'''

# Add the script to the page.
page['meta'] = ui.meta_card(box='', script=ui.inline_script(
    # The Javascript code for this script.
    content=clock_script,
    # Execute this script only if the 'clock' element is available.
    targets=['clock'],
))

page.save()