Cutom HTML sourced from dynamic data sometimes shows, sometimes not

[Oleum]

Hello

edit: ok I see I cannot post code here for some reason (bubble taking no-code too serious? XD), screenshot attached

I have to put some custom html in a page dynamically, data changes on every pageload, it is for embedding a chat. Using Page HTML Header field for this would be ideal, however I can use HTML element as well.

The embedded code itself is working and verified. It should inject a chat into a website. Works fine on any other hosting. In my app it is a lottery with 20% win rate. Turning off plugins does not solve the problem.

I have an alternative, simpler version of this script that do the same but imports the second from outside

This is working well in my app but I need the first one. I guess the breaking difference is calling a javascript method explicitly.

Any help appreciated!

Edit, I noticed debug outouts this:
Bug in custom html:
@https://aaaweso.me/version-test/demo/aaawesome-ai+wikipediaorg-42?debug_mode=true line 10 > injectedScript:2:3
b@https://aaaweso.me/package/run_debug_js/d722a533422491de4fff7c425a0c461a373a3eb67302c9511a4b05f52e3c6302/xfalse/x25/run_debug.js:10:866
He@https://aaaweso.me/package/run_debug_js/d722a533422491de4fff7c425a0c461a373a3eb67302c9511a4b05f52e3c6302/xfalse/x25/run_debug.js:10:48496
append@https://aaaweso.me/package/run_debug_js/d722a533422491de4fff7c425a0c461a373a3eb67302c9511a4b05f52e3c6302/xfalse/x25/run_debug.js:10:49847
html/<@https://aaaweso.me/package/run_debug_js/d722a533422491de4fff7c425a0c461a373a3eb67302c9511a4b05f52e3c6302/xfalse/x25/run_debug.js:10:50939
B@https://aaaweso.me/package/run_debug_js/d722a533422491de4fff7c425a0c461a373a3eb67302c9511a4b05f52e3c6302/xfalse/x25/run_debug.js:10:32545
html@https://aaaweso.me/package/run_debug_js/d722a533422491de4fff7c425a0c461a373a3eb67302c9511a4b05f52e3c6302/xfalse/x25/run_debug.js:10:50617
[2380] injectedScript:2:3)

[mishav]

@Oleum

I cannot post code here for some reason

```
Post code inside triple backticks
Like this
```

@Oleum

I have to put some custom html in a page dynamically

What do you mean dynamically? Bubble’s dynamic data?

@Oleum

In my app it is a lottery with 20% win rate.

Sounds like a timing issue, where the script relies on some js running first, and the browser not always doing things in the order you expect.

It might need to explicitly wait for its dependency, here is an example for a similar problem:

Javascript works on other site, but not on Bubble

The “three scripts” HTML element is being rendered too early, i.e. before the other HTML element has been rendered. This is because your conditional is all about Bubble conditions and not about whether the browser has done its thing with the (unknown to the browser) dependency. One workaround is to poll for existence of the two ids, thus allowing any rendering order … var minimizedMode = false; var autoScroll = true; var doubleClick = false; var iii = setInterval(() => { if (document.getEl…

[Oleum]

Thank you very much for your answer @mishav . It is clearly a timing issue. I have noticed it strongly depends on the content of scripts I want to embed and site loading time.

The core functionality of my app is to allow a user to inject his own elements into a page. Those elements are first saved into DB and retrieved when displaying a page, I have “current page thing” as a source for injected HTML (mostly JavaScript). On a page I’m talking about I have just 3 important elements: iframe with external site loaded, a custom html for script injection, my heading.

I think I can’t use “check id loaded” method from your link because I do not know what users will inject and what resulting DOM will be – how many divs etc. and what id’s. I have tried this method waiting for a main content to load, but it doesn’t solve the problem. I need some method of ensuring that a given HTML element with custom JavaScript will be the last one to evaluate after all other things. If you have any ideas how to implement this, it would be a great help.

[Oleum]

So, the problem is sort-of solved for now, at least in this particular case.

The fix is to place all external elements on a page into a single HTML element and check the ‘display as iframe’ option. Suddenly, everything loads correctly and in order.

It would be great to have a dedicated plugin to ensure that all custom JavaScript loads properly, with the correct dependencies.

I will not mark this post as solved for a while, in the hope of finding a ‘real’ solution.

[mishav]

The iframe idea is good, and will solve other problems with conflicting css and different DOM paths.

If you know all the dependencies apart from the injected HTML, how about controlling when to inject?
For example,
Page loaded workflow,
Run JS action
param1 set to Search for html to inject's first item's htmltext
script set to

var iii = setInterval(() => {
  if (document.getElementById("hypertranscript") &&
    document.getElementById("hyperplayer") && 
    someLibrary?.someMethod) {
    clearInterval(iii);
    // inject the html, there are many ways to do this, for example
    document.getElementById("parentElement").innerHTML = properties.param1;
  }
},200);