Toolbox Plugin Expression & JS to Bubble in a Popup

I am using the toolbox plugin by placing an expression element and the JavaScript to bubble elements on the page. I have been able to successfully get it to function as I’d like with help from the community.

I am now trying to use it in a popup element but I get the following error message

I had previously had a working solution…however now that I am testing it again, even on the page that was once working, it no longer does and it is showing the same error message.

I’ve tried to create a new app to test and I get the same error message there.

This is a link to the editor that was previously ( 30 minutes ago ) working.

Any ideas why this error message would be coming up?

Expression has nothing to do with JS to Bubble. (Expression basically combines the functionality of Run JS and JS to Bubble into one element for cases where you can just run the script passively. But you can make Expression respond in an event-like manner: Set its script time be empty-ish by default — e.g., // code is over in conditions — and then change the code based on some condition, causing the script to change and, as a result, run. This is useful for example when you must wait for the page to be fully loaded until executing the script [e.g., because it relies on some external package]…)

That being said, what the error message means is that someone is trying to add an event listener to something that does not exist.

That “someone”, my friend, is you. :laughing::scream:

Your code looks for an input with ID myInput and then attempts to add a listener to it.

However, if “myInput” does not exist in the page, your variable “input” will be null. (Because input is the result of getElementByID… and your target (myInput) does not exist in the page until the popup is displayed. So, instead of getting a handle to the desired element, you get nothing [null]… and you can’t put an event listener on nothing.)

So either move Expression into the popup (may or may not work…test it) OR, take note of my first paragraph. (Set the Expression code to be placeholder, but in the conditionals tab, change expression’s code to your desired code WHEN the popup is visible and element “myInput” actually exists.)

The point is that your Expression’s code (Which runs now on page load) will error when myInput doesn’t exist. And your code will not execute automatically once myInput DOES exist.

So you must force Expression to update (which you can do by changing its code [perhaps it’s called script?] parameter in the conditions tab.

Aside: I had struggled with a similar problem and the author of Expression kindly gave me this same tip. That’s the only reason I know the answer.

While the Toolbox plugins are very clever, they are on the very edge of being “plugins that do nothing” as I’m fond of saying. They are not very Bubbly and deserve a rethink. Expression for example is something like 12 lines (or less) of code and has no API beyond the script input. :man_shrugging:

Thanks for the response. I had originally placed the expression and the JS to bubble elements into the popup and it was at that point I first got the error message.

I then went back and tested on a page and it was not working at that point, although it previously had.

The input element had been on the page the entire time.

I had actually gotten help from @tim12333 and he was kind enough to get it working on another app. From there I copied all the code etc. into the app I linked above. It was working, and after testing several times, I posted in the forum how to do it, as I was at that point confident it was all set up correctly and working properly.

Then when putting it into another app on a page it worked, but then I tried in a popup and everything seemed to get all messed up. Went back to the app I linked and noticed the error message there at that point too.

So I created another test app…

https://bubble.io/page?name=index&id=testjscapson&tab=tabs-1

I am not getting the error message on this one, however the functionality just doesn’t work at all.

All very strange to me as I know nothing of JavaScript and just naturally assumed if I set things up the same exact way it should be working, but nonetheless it isn’t and I’m lost on the issue.

I was informed the same thing @keith did about the element not being on the page when the expression is ran.

Essentially the input is not loaded during the page load prior to the expression element being loaded. The quick fix was to set the conditional on the expression element to be visible when the input element is visible.

This worked as it seemed to on page load, load the input element and then afterward the conditional showed the expression element. Must be similar idea for the popup.

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