Inserting a Reusable Footer into a HTML element via Javascript and Env Variable


I was looking for a solution for two days, but I got stuck now. Will somebody help me out?

[What I want to do]
I want to insert footer(reusable element) into my HTML element.

[What I did]

  1. I placed Env Variable in the reusable elements to pass a data between them.
  2. I had Javascript code run to insert the reusable footer into the HTML element, just like this.

var node = document.getElementById(“footer”);

[What it worked]
I made a button with a workflow of Env Variable that change its state and initiate the Javascript to run. It worked fine, so I got the footer at the bottom of the landing page.

[What I failed]
I need this workflow run when “Page is loaded”. Because the footer is supposed to be there on load. But the issue I encountered here is the footer disappeared on load.

[Possible cause]
I guess the Javascript to insert the footer runs faster than the Env Variable connects the reusable elements. As the result of that, the footer was inserted into unknown element.

I think this issue is related to the timing of Javascript run through.
I get it right through when I open my page with debugger that runs “slow” or “step-by-step” mode.

I was searching the forum if somebody find similar issues and I did find @NigelG was mentioning about it in here.

So, do you think this issue is not related to the Env Variable? @gaurav

Have you tried:

do when a condition is true
when page is loaded (entire) is “yes”
run script

Instead of the reg page load which triggers when dom is loaded but before Bubble JS “drawing” DOM elements is done executing.

1 Like

Hi @duke.severn,

Thanks for the quick response.
I tried your suggestion, but I couldn’t make it work, unfortunately.

But I see a difference though…
Script did not run if I place the condition “when page is loaded(entire) is yes” . Target element(reusable footer) stayed at the original position.

It seems like the script runs faster with regular page loaded condition, but the latter condition runs too late and failed to grab the element. Again, both of them works just fine if I run it with debug mode “slow” and “step by step”.

It must be very close to the solution, but I just can’t get it right on spot.

I encountered something similar recently when trying to insert a script. When placing the script static, it loaded fine. When it had to look up the script, the load was too quick so it was empty variable.

In the end I attached the script to the pages type that was loading and put the script in the pages header as opposed to a js workflow.

Not the cleanest of work around but it worked for me. Hopefully you can make some progress!

1 Like

Can you share a public link of the editor reproducing the setup @rio. That will help figure out what’s going on. My hunch is this issue is because you’re using reusable elements and bubble doesn’t strictly follow the sequence of creation of reusables after page is initialized i.e. you reusable element may be created / run before the document object itself.

Hi @gaurav,

Thank you so much for reaching out to me.
I tried two different script that makes different outcomes.

  1. This one is fine with debug mode “slow”, but the footer disappears when it’s “normal”.

var node = document.getElementById(“footer”);

  1. It works fine with “normal” mode, but the footer is duplicated.

document.addEventListener(“load”, function(){
var oldNode = document.getElementById(“footer”);
var newNode = document.importNode(oldNode, true);

Thanks @dan8 !
Unfortunately placing the script in the page header didn’t work out this time.

Thanks anyway.

I think this script works.

document.addEventListener(“load”, function(){
var s = document.getElementById(“footer”);
var h = document.getElementsByClassName(‘grid2’)[0]
h.insertAdjacentElement(“afterend”, s);

  • I used “insertAdjacentElement” instead of “appendChild”’
  • “insertAdjacentElement” is supposed to place the Footer after “grid2”.

I still see bunch of errors thrown on the console, at least it works now…:wink:

So, I was trying to solve a problem that never existed from the beginning.

I found Bubble has its solution right there.

I assumed I needed to insert the reusable element directly in the html. But no need for that.
You can place a reusable element freely next to HTML element by checking on the “Stretch to fit content”.

Please forget about all the crappy scripts I doodled.