Calling Javascript functions from two different elements

Need help
1

Hello there,

I am a beginner bubble user and have encountered my first serious challenge and looking for some help.

152035623_10164918543415123_2688406363543015061_o
152035623_10164918543415123_2688406363543015061_o1518×864 64.7 KB

I’ve got an HTML element I’m using to embed an external email editor. I can build the additional functions it lets me do within the HTML element itself, but was wondering how I can call on those functions outside of the HTML element?

For eg. I want to invoke the saveTemplate function on button click but if I try invoking it comes up with unlayer is not defined etc.

Things to note: I’ve got Toolbox installed but still no idea how I can get it to invoke the function outside of the HTML element.
I know I can render a button(using HTML) inside the HTML element and have the script run from there, but would like to minimize the amount of code I type as much as possible.

Any guidance would be much appreciated! :slight_smile:

2

So I tried a simplified approach and I’m 90% there.

image
image1451×863 85.3 KB

So as you can see I’ve got a simple saveTemplate() function.

When I click on the button I run some javascript as follows

image
image1165×589 31.9 KB

This logs ‘hi’ correctly to the console.

Now the issue I have is this email editor that I’m trying to embed can’t work unless I have it set as an iframe for some reason.

However when I set it as an iframe, my run javascript doesn’t function correctly anymore.

So the question is what’s the workaround to get this working again?

@mishav adding mishav here in case there’s a different setup to running functions when the HTML is in an iframe

3

Embed issue

What sort of problems does it have that the iframe fixes? Could it be a clash of css class names between the library and Bubble? You could look into overriding Bubble styles with !important, or renaming the library’s classes.

iframe javascripteriffic

Yes, there are workarounds for the separation that the iframe gives.

To match your example …

document.getElementById('myHTML').firstElementChild.contentWindow.saveTemplate('hhh')

From within the iframe to call functions on the main window …

window.parent.bubble_fn_runme("blah");
1 Like
4

I reverted it back just now but it’s not showing the error I had before. It was a fair few cloudfront errors when I had tested it. Now it doesn’t show any errors, but it still doesn’t display anything if that iframe option is unticked.

This worked like a charm! Thank you so much!

I had done so much googling and nearly gotten there. I think last I had tried was
document.getElementById('myHTML').contentWindow.saveTemplate()
but looks like I was missing that firstElementChild, so thank you, I would never have tried that out by my own.

1 Like
5

This topic was automatically closed after 70 days. New replies are no longer allowed.