Problem with Bubble not correctly replacing dynamic values in HTML block

rob.shropshire · 2025-01-28T09:21:41.764Z

Hi,

I have been having an issue for days so i am hoping someone can help! I have a multi file-uploader on a page, and i would like to allow users to preview an .stl file they have uploaded before submitting and saving to database, to achieve this i have set a custom state.

In order to render the file i have using three.js. The issue is that whatever i try, Bubble fails to prepend HTTPS or the Current Cell Index with the correct values.

Here is my set-up:

I have an RG group, with a type of content as file, and the data source being the custom state. The custom state is a file-list

image738×747 28.4 KB

In the workflow area, i set the state, when multi-file uploader value is changed:

image857×494 14.4 KB

Here is my HTML

3.1 - I have ID attribute set

image386×821 16.3 KB

3.2 - Below is my HTML code - where i set the fields of current cell index and current cell file URL, i have even added code to ensure HTTPS is prepended

image351×775 19.1 KB

When i go to preview my app, nothing renders. Because it does not appear to replace the dynamic values. I know the custom state is all working, as i have set up a text element to display both file URL and also the Cell Index to make sure this is behaving as expected, however in the text element whilst it correctly identifies the file that has been uploaded, it does not prepend HTTPS

image1001×219 12.4 KB

image1232×170 9.98 KB

image1415×290 5.45 KB

fyi - I know the three.js and rendering is working, because i have set-up a test with a static file on page and everything works.

Does anyone have any suggestions, close to giving up!

ihsanzainal84 · 2025-01-28T12:27:59.922Z

Your resulting url is weird. Why is it encapsulated in https:{{ }}? Is it supposed to that way?

hergin · 2025-01-28T14:19:36.815Z

Bubble doesnt prepend https: for some reason. You should do it yourself, just put https: before the url.

And your second current cell's index doesnt look like a dynamic value but just a text. Maybe at some point while copy/pasting, you forgot it like a text. Because the first one seems to be working (stl-container-{{1}})

rob.shropshire · 2025-01-28T16:16:49.549Z

ihsanzainal84:

Your resulting url is weird. Why is it encapsulated in https:{{ }}? Is it supposed to that way?

I have removed the {{ in the HTML code now. see below:

image330×131 2.74 KB

In the debugger, it appears to provide the correct URL but still does not render:

image1500×616 41.7 KB

image1515×433 10.2 KB

Any suggestions

rob.shropshire · 2025-01-28T16:18:57.825Z

Thanks for your response, i have added HTTPS into the HTML now like below:

image327×121 2.7 KB

It looks to be using the right index now:

However it is still not working, this is how i have the ID attribute set:

Any suggestions, as it still does not work, thanks!

ihsanzainal84 · 2025-01-29T03:25:33.843Z

Your event listener script is a page load event (DOMContentLoaded). Since the script is looking for the appropriate containers (based off the ID prefix), there’s a chance that the RG elements are rendering after the script runs.

You don’t need the DOM load event and instead run the main code in a Run Javascript action (Toolbox plugin). The Run Javascript action should be in a WF that you are sure that the RG has been fully loaded.

siagorat · 2025-01-29T07:16:46.228Z

It seems that Bubble is not correctly processing dynamic values in the HTML block. The issue might be related to how the data is passed to the three.js script.

What helped me in a similar situation:

Use console.log in the HTML to check if the URL and index values are actually being passed to the script.
Explicitly prepend https:// to the URL in the workflow, not just in the HTML code.
Use setTimeout() before rendering to ensure the values are available when three.js is called.
However, the issue might also be due to a delay in Bubble updating the values.

system · 2025-04-08T09:22:07.384Z

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