Problem with Bubble not correctly replacing dynamic values in HTML block

Need help
1

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:

  1. 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

image
image738×747 28.4 KB

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

image
image857×494 14.4 KB

  1. Here is my HTML

3.1 - I have ID attribute set

image
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

image
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

image
image1001×219 12.4 KB

image
image1232×170 9.98 KB

image
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!

2

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

3

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}})

4

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

image
image330×131 2.74 KB

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

image
image1500×616 41.7 KB

image
image1515×433 10.2 KB

Any suggestions

5

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

image
image327×121 2.7 KB

It looks to be using the right index now:

image

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

image

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

6

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.

7

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.

8

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