✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Trigger callback from custom JS

Dear all,

First of all thanks for the amazing work of the community, I need to say it helped me a lot while using the library.
I’m developing an interactive webapp using dash and I have reach a point where I am bit of stuck…

One of the components of my app is an Iframe component within my app which I communicate with by a custom.js with defined functions sending events to this iframe, such as:
document.getElementById(‘myiframe’).contentWindow.postMessage …

This is properly working, the thing, is that I would need to ‘catch’ the response to certain actions over the Iframe, to do so, also in my custom.js I have define a listener such as:
window.addEventListener(“message”, function iframe_listener_function(e){ …

This is properly working too, so, when I click on the Iframe my listener function gets trigger and I receive the value returned by this Iframe… then, since I would like this value to be the input for one of my callbacks i define a ‘hidden’ button within my app that I trigger once this returned value is receive in my custom.js, such as:
document.getElementById(‘input-box’).value = identifier;
document.getElementById(‘but_update_from_iframe’).click();

The callback in question is:

@app.callback(
[Output(‘button_populate’, ‘disabled’),
Output(‘info_obj’, ‘data’),
Output(‘javascript’, ‘run’),
Output(‘show_results’, ‘style’),
Output(‘container_prod_epoch_mag_g’, ‘children’),
Output(‘container_prod_epoch_epoch_g’, ‘children’),
Output(‘container_prod_epoch_err_g’, ‘children’),
Output(‘container_products_mcmc’, ‘children’),
Output(‘container_designation_id’, ‘children’),
Output(‘container_folded’, ‘children’)],
[Input(‘input-box’, ‘value’),
Input(‘but_update_from_iframe’, ‘n_clicks’),
Input(‘button_populate’, ‘n_clicks’)]
)
def disable_button_output(value, nclicks, nclicksIframe):

    context = dash.callback_context.triggered[0]['prop_id'].split('.')[0]

    if context == 'button_populate':
                 ...           
    elif context == 'but_update_from_iframe':
                 ...

The issue im finding is that even the callback is properly executed on_click from my custom.js and the context is correct (but_update_from_iframe) triggers the callback, the input-box value is not properly updated and I don’t receive the updated value in my custom.js listener function but the previous old value introduced
Any help will be appreciated

Thanks in advance!

Dosantos

1 Like

Did you figure this out? I’m having a similar issue with recaptcha.

Hi there Roy,

Unfortunately not… I wasn’t able to retrieve the value in the callback, when it is trigger from the custom.js
cheers,

Dosantos