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