HTML element seems to only have access to information when it's rendered

So I have an html element that has no html in the appearance tab but two conditions that render the html, which is just javascript.
The first condition sets the html value when a certain state is yes. Then when that state turns to no, the second html is rendered. The html (i.e JS) related to the first condition has a loop in it which I expected to stop when the condition is long longer true.

What seems to be happening is that when the condition switches, the JS in the first condition continues to run. I though, ok, I’ll add to the JS an if statement to break the loop for when the state is no longer yes, which didn’t work.

I then tried adding a javascript to bubble function in the second condition to pass information to the first condition but that didn’t work either.

What I think is happening is that the html element does not have access to new information once it has rendered. Am I being dumb or is this the case? I have seen this behaviour elsewhere as well.

If yes, is there a way around this?

Thanks
Paul

managing the control flow by conditionally rendering script tags seems like a good recipe for bugs.
What is that you want to do with the 2 scripts?

Clearly its a great recipe for bugs.

The scripts run a loading bar. I have a group element that I have added an id attribute to. A user uploads a file which then triggers a backend workflow. The loading bar shows the progress of the upload and then once the upload is finished, the backend workflow is triggered which calls a 3rd party API to process the file. This is where the second condition comes in to reset the loading bar back to 0% and show the progress of the second stage.

I am not using any file uploader plugin or the native bubble one as I needed a bunch of customized features.

Would love to hear any better ideas that you have.

Thanks for your help.

Make a plugin where you create the element that you need for the bar, then add one action to start the display of the progress, one to reset it and one to stop it (or any other action that works for your logic).
In the plugin you can handle correctly the lifecycle of the element and the animation.

Oh ok awesome. Didn’t know that was a differentiator of plugins. My default has always been to just use the “run javascript” action or JS in an html element. I will make the plugin.
Thanks so much for your help.

Just to confirm, are you suggesting that I don’t create the group in the bubble editor with an ID attribute and then use the plugin to vary the width, I create the element in the plugin itself?

It’s probably easier if you handle everything in the plugin.

1 Like

Thanks a lot. Will do