Inconsistencies in preview mode when running JS with Toolbox plugin

[santiago.borobia]

I need to display a map based on HERE Technologies using the Toolbox plugin so that I can run my JavaScript code. What seems really odd is that sometimes (without changing absolutely anything), in preview mode my code works perfectly, and other times, it doesn’t work. Additionally, when it does work, the debugger marks no errors, but when it does not work, the debugger may show different errors (some of which won’t appear as errors some of the times I run the preview mode).

I have attached images of these two situations (different runs of the preview mode in which the code worked or not).

Has anyone experienced this? Do you have any idea of what the issue might be?

Thank you for your help.

The map is displayed in an HTML element that contains the following code:

Finally, when the page is loaded, I run the following line using a RunJavascript element:

initializeHEREmap();

[keith]

You need to defer calling your script (in RunJS) until the scripts you depend on are fully loaded.

In your function initializeHEREmap you could do something like:

function initializeHEREmap() {
if (H) {
// your existing code
} else {
setTimeout(initializeHEREmap(), 10)
}
}

This’ll just keep trying to call the initialize function until it’s possible to execute every 10ms. I’m on mobile, excuse my formatting.

[keith]

BTW the problem might also be that H.service doesn’t exist yet, so

if (H && H.service)…

[santiago.borobia]

@keith

setTimeout(initializeHEREmap(), 10)

Thank you very much for your suggestion! I think it does have something to do with the scripts or elements not being fully loaded.

Unfortunately, I have tried your solution but it still only works some of the time. I have screenshotted the three different errors I get (I only get one at a time). I’ll attach these errors as well as the new code in my HTML element.
The most persistent error is the “H not defined” one, followed by the recursive one (in which even after those iterations, the IF condition never is true).

I have also tried making the HTML element not visible on page load and then, making it visible after the page is loaded in the workflow. This also returns the same “H not defined” error. I think I’ve tried all possible variations already!

Thank you very much!

[jonah.deleseleuc]

Can I suggest turning your code into a private, custom plug-in?

I find when my code gets too big it helps me debug any problems I have.

Just a thought!

[santiago.borobia]

I had not considered this option. I’m very new to Bubble and don’t have any experience in creating custom plugins. I’ve watched a couple of tutorials but most of them don’t really focus on plugins that heavily rely on code (JavaScript specifically). Do you happen to know of a tutorial or resource that might be useful for this?
Thank you very much!

[jonah.deleseleuc]

Unfortunately, I believe your best bet is tinkering around with it. You can checkout some of my free plugins, you can click the button See Plugin Code and see how I do it if you’d like