Declare clientside callback with f-string

I’m trying to declare a javascript clientside callback using f-string (so I can reference constants defined somewhere else), but it stops it from working correctly. What am I doing wrong? :question:
I escaped all curly brackets, syntax seems fine

SOME_CONSTANT_ID = “id1”

app.clientside_callback(
f"“”
function(id) {{
document.addEventListener(‘keydown’, function(event) {{
if (event.ctrlKey) {{
if (event.key == ‘a’) {{
document.getElementById({SOME_CONSTANT_ID}).click()
event.stopPropogation()
}}
}}
}});
return window.dash_clientside.no_update
}}
“”",
Output(SOME_CONSTANT_ID, '“id”),
Input(SOME_CONSTANT_ID, “id”)
)

The error I’m getting in the console:

TypeError: Cannot read properties of null (reading ‘click’)

Hello @kiteme,

I am thinking you need to wrap this in single quotes:

document.getElementById('{SOME_CONSTANT_ID}').click()

Otherwise its passing it as a variable that is undefined.

1 Like